Heim Web-Frontend js-Tutorial So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

Dec 18, 2023 pm 05:56 PM
highcharts 数据展示 gestapeltes Diagramm

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

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:

1

<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:

1

<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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie dynamische Daten in Highcharts, um Echtzeitdaten anzuzeigen So verwenden Sie dynamische Daten in Highcharts, um Echtzeitdaten anzuzeigen Dec 17, 2023 pm 06:57 PM

So verwenden Sie dynamische Daten in Highcharts, um Echtzeitdaten anzuzeigen

So verwenden Sie das Sankey-Diagramm, um Daten in Highcharts anzuzeigen So verwenden Sie das Sankey-Diagramm, um Daten in Highcharts anzuzeigen Dec 17, 2023 pm 04:41 PM

So verwenden Sie das Sankey-Diagramm, um Daten in Highcharts anzuzeigen

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts Dec 18, 2023 pm 05:56 PM

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

So erstellen Sie ein Gantt-Diagramm mit Highcharts So erstellen Sie ein Gantt-Diagramm mit Highcharts Dec 17, 2023 pm 07:23 PM

So erstellen Sie ein Gantt-Diagramm mit Highcharts

So erstellen Sie eine Karten-Heatmap mit Highcharts So erstellen Sie eine Karten-Heatmap mit Highcharts Dec 17, 2023 pm 04:06 PM

So erstellen Sie eine Karten-Heatmap mit Highcharts

So erstellen Sie benutzerdefinierte Diagramme mit Highcharts So erstellen Sie benutzerdefinierte Diagramme mit Highcharts Dec 17, 2023 pm 10:39 PM

So erstellen Sie benutzerdefinierte Diagramme mit Highcharts

So implementieren Sie statistische Diagramme mit Vue für die Datenanzeige auf großen Bildschirmen So implementieren Sie statistische Diagramme mit Vue für die Datenanzeige auf großen Bildschirmen Aug 17, 2023 am 09:54 AM

So implementieren Sie statistische Diagramme mit Vue für die Datenanzeige auf großen Bildschirmen

So verwenden Sie Streudiagramme zur Anzeige von Daten in Highcharts So verwenden Sie Streudiagramme zur Anzeige von Daten in Highcharts Dec 17, 2023 pm 10:30 PM

So verwenden Sie Streudiagramme zur Anzeige von Daten in Highcharts

See all articles