So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts-js-Tutorial-php.cn

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

WBOY

Freigeben： 2023-12-18 17:56:46

Original

728 Leute haben es durchsucht

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

Gestapelte Diagramme sind eine gängige Methode zur Datenvisualisierung, mit der die Summe mehrerer Datenreihen gleichzeitig und die Summe jeder Datenreihe im Formular angezeigt werden können eines Balkendiagramms beitragen. Highcharts ist eine leistungsstarke JavaScript-Bibliothek, die eine große Auswahl an Diagrammen und flexible Konfigurationsoptionen bietet, um verschiedene Anforderungen an die Datenvisualisierung zu erfüllen. In diesem Artikel stellen wir vor, wie man mit Highcharts ein gestapeltes Diagramm erstellt, und stellen entsprechende Codebeispiele bereit.

Zuerst müssen wir die Highcharts-Bibliotheksdatei vorstellen. Fügen Sie den folgenden Code im

-Tag der HTML-Seite hinzu:

<script src="https://code.highcharts.com/highcharts.js"></script>

Nach dem Login kopieren

Erstellen Sie dann einen Container im -Tag. Sie können ein

-Element verwenden und ihm eine eindeutige ID geben, z. B. „Chart-Container“. Der Code lautet wie folgt:

<div id="chart-container"></div>

Nach dem Login kopieren

Als nächstes können wir JavaScript-Code verwenden, um das Diagramm zu konfigurieren und zu rendern. Um ein gestapeltes Diagramm zu erstellen, müssen wir die Stacking-Eigenschaft von Highcharts verwenden und sie auf „normal“ setzen. Gleichzeitig müssen wir auch den Namen der Datenreihe, die Daten und die Stapelmethode angeben. Der Code lautet wie folgt:

Highcharts.chart('chart-container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '堆叠图表示例'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '系列一',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '系列二',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '系列三',
        data: [3, 4, 4, 2, 5]
    }]
});

Nach dem Login kopieren

Im obigen Code erstellen wir ein Balkendiagramm (Typ: „bar“) und setzen den Titel auf „Beispiel für ein gestapeltes Diagramm“. Die Kategorien auf der x-Achse sind Monate und die y-Achse stellt numerische Werte dar. Das umgekehrte Attribut der Legende wird auf „true“ gesetzt, sodass die Datenreihen in gestapelter Reihenfolge angezeigt werden. Das Stacking-Attribut in plotOptions ist auf „normal“ gesetzt, was bedeutet, dass die Datenreihe gestapelt angezeigt wird. Schließlich geben wir über das Serienattribut drei Datenreihen an, einschließlich Namen und entsprechender Daten.

Schließlich müssen wir nur noch diesen JavaScript-Code in die Seite einfügen, um sicherzustellen, dass das gestapelte Diagramm beim Laden der Seite gerendert wird. Sobald wir fertig sind, erhalten wir eine Seite mit einem gestapelten Diagramm, das die Summe und den individuellen Beitrag mehrerer Datenreihen visuell darstellt.

Das Obige ist die spezifische Methode und das Codebeispiel für die Verwendung gestapelter Diagramme zur Anzeige von Daten in Highcharts. Mit einfacher Konfiguration und Codierung können wir ganz einfach ein attraktives und leicht verständliches gestapeltes Diagramm erstellen, um Daten besser anzuzeigen und zu analysieren und fundiertere Entscheidungen zu treffen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!