Dynamische Tortendiagramme mit Tabulator und ECharts: Eine Schritt-für-Schritt-Anleitung

Datengetriebene Visualisierungen sind ein wesentlicher Bestandteil moderner Webanwendungen. In diesem Artikel zeigen wir, wie man mithilfe von Tabulator und ECharts dynamische Tortendiagramme erstellt, die mit Tabellen interagieren. Wir demonstrieren, wie Tabellen-Interaktionen wie Sortierung oder Paginierung die angezeigten Diagramme automatisch aktualisieren.

Was wir entwickeln

Unsere Beispielanwendung wird folgende Funktionen bieten:

Eine sortierbare und paginierte Tabelle mit Tabulator.
Ein Tortendiagramm, das sich dynamisch basierend auf der aktuell sichtbaren und sortierten Spalte der Tabelle aktualisiert.
Unterstützung für Doppelklick-Interaktionen im Diagramm, um detaillierte Daten in einem Liniendiagramm anzuzeigen.

Schauen wir uns die Umsetzung Schritt für Schritt an.

Schritt 1: Daten vorbereiten

Zunächst erstellen wir ein Beispiel-Datenset mit Dummy-Daten, die Verkaufszahlen repräsentieren:

const sampleData = [
    { Bestellnummer: 101, Titel: "Buch A", Gewinn: 1200.5, Einheiten: 300, Autor: "Autor 1" },
    { Bestellnummer: 102, Titel: "Buch B", Gewinn: 950.3, Einheiten: 200, Autor: "Autor 2" },
    { Bestellnummer: 103, Titel: "Buch C", Gewinn: 760.8, Einheiten: 150, Autor: "Autor 3" },
    { Bestellnummer: 104, Titel: "Buch D", Gewinn: 1500.0, Einheiten: 400, Autor: "Autor 4" },
    { Bestellnummer: 105, Titel: "Buch E", Gewinn: 300.7, Einheiten: 90, Autor: "Autor 5" }
];

Schritt 2: Tabulator initialisieren

Tabulator wird verwendet, um die Daten in einer Tabelle anzuzeigen. Die Tabelle soll nach der Spalte „Gewinn“ sortiert werden, und wir legen einige Spaltenfilter und Formatierungen fest:

const table = new Tabulator("#table-container", {
    data: sampleData, // Datenquelle
    layout: "fitColumns",
    pagination: "local",
    paginationSize: 5,
    initialSort: [{ column: "Gewinn", dir: "desc" }], // Standard-Sortierung
    columns: [
        { title: "Bestellnummer", field: "Bestellnummer", sorter: "number" },
        { title: "Titel", field: "Titel", sorter: "string" },
        { title: "Gewinn (€)", field: "Gewinn", sorter: "number", formatter: cell => cell.getValue().toFixed(2).replace(".", ",") + " €" },
        { title: "Einheiten", field: "Einheiten", sorter: "number" },
        { title: "Autor", field: "Autor", sorter: "string" }
    ]
});

Schritt 3: Tortendiagramm mit ECharts

Für die Visualisierung verwenden wir ECharts. Wir erstellen ein Tortendiagramm, das die aktuell sichtbaren Daten der Tabelle anzeigt.

function renderPieChart(table) {
    const currentPageData = table.getData("visible"); // Sichtbare Zeilen der aktuellen Seite

    const pieData = currentPageData.map(row => ({
        name: row.Titel,
        value: row.Gewinn
    }));

    const chart = echarts.init(document.querySelector("#chart-container"));
    chart.setOption({
        title: { text: "Gewinnverteilung", left: "center" },
        tooltip: {
            trigger: "item",
            formatter: params => `${params.name}: ${params.value.toFixed(2).replace(".", ",")} € (${params.percent}%)`
        },
        series: [
            {
                name: "Gewinn",
                type: "pie",
                radius: "50%",
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                }
            }
        ]
    });
}

Schritt 4: Diagramm bei Interaktionen aktualisieren

Wir verbinden die Tabulator-Interaktionen mit unserem Tortendiagramm. Wenn der Benutzer die Seite wechselt oder sortiert, wird das Diagramm neu gerendert:

table.on("renderComplete", function () {
    renderPieChart(table); // Aktualisiere das Tortendiagramm nach dem Rendern der Tabelle
});

Schritt 5: Doppelklick-Interaktion im Tortendiagramm

Wenn ein Segment im Tortendiagramm doppelt angeklickt wird, laden wir zusätzliche Daten und zeigen sie in einem Liniendiagramm an:

chart.on("dblclick", function (params) {
    const clickedData = params.data;

    if (!clickedData) return;

    console.log(`Doppelklick erkannt: ${clickedData.name}`);
    // Hier können weitere Daten geladen oder Aktionen ausgeführt werden
});

Schritt 6: Alles zusammenfügen

Binden Sie Tabulator und ECharts in Ihre HTML-Datei ein:

<div id="table-container"></div>
<div id="chart-container" style="height: 400px; margin-top: 20px;"></div>

Und initialisieren Sie die Tabelle und das Diagramm in Ihrer main.js.

Fazit

Mit Tabulator und ECharts haben wir eine leistungsstarke und flexible Lösung für interaktive Tabellen und Visualisierungen geschaffen. Der Code ist erweiterbar, sodass Sie ihn leicht an Ihre Bedürfnisse anpassen können.

1manfactory.com - Blog of Jürgen Schulze