Heim >Web-Frontend >js-Tutorial >So erstellen Sie mit Highcharts ein rechteckiges Baumdiagramm
So erstellen Sie mit Highcharts ein rechteckiges Baumdiagramm
- WBOYOriginal
- 2023-12-18 08:25:22767Durchsuche
So erstellen Sie ein rechteckiges Baumdiagramm mit Highcharts
Highcharts ist eine beliebte JavaScript-Diagrammbibliothek, die uns eine große Auswahl an Diagrammtypen zur Verfügung stellt. Eines davon ist das rechteckige Baumdiagramm, mit dem wir hierarchische Daten visuell darstellen können. In diesem Artikel wird erläutert, wie Sie mit Highcharts ein rechteckiges Baumdiagramm erstellen, und es werden spezifische Codebeispiele bereitgestellt.
Schritt 1: Highcharts installieren und einführen
Zuerst müssen wir die Highcharts-Bibliotheksdatei von der offiziellen Highcharts-Website herunterladen und in unser Projekt einführen. Es kann auf zwei Arten abgerufen werden:
- Laden Sie die Highcharts-Bibliotheksdatei herunter und fügen Sie sie in die HTML-Datei ein.
- Installieren Sie Highcharts über npm und führen Sie es in das Projekt ein.
Das Folgende ist eine Beispiel-HTML-Datei, die das einführt Code der Highcharts-Bibliothek:
<!DOCTYPE html> <html> <head> <title>矩形树图表示例</title> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container"></div> </body> </html>
Schritt 2: Daten vorbereiten
Bevor wir ein rechteckiges Baumdiagramm erstellen, müssen wir hierarchische Daten vorbereiten. Das Datenformat des rechteckigen Baumdiagramms ist ein verschachteltes Array von Objekten. Jedes Objekt enthält die Attribute „Name“ (Knotenname) und „Wert“ (Knotenwert) sowie das Kinderattribut (ein Array mit untergeordneten Knoten). Hier sind Beispieldaten:
var data = {
name: '根节点',
value: 10,
children: [
{
name: '子节点1',
value: 5,
children: []
},
{
name: '子节点2',
value: 3,
children: [
{
name: '子节点2.1',
value: 2,
children: []
},
{
name: '子节点2.2',
value: 1,
children: []
}
]
},
{
name: '子节点3',
value: 2,
children: []
}
]
};Schritt 3: Erstellen Sie ein rechteckiges Baumdiagramm
Als nächstes können wir die chart-Methode von Highcharts verwenden, um ein rechteckiges Baumdiagramm zu erstellen. In der Methode chart müssen wir den Diagrammtyp als rectangularTree angeben und andere notwendige Attribute wie Titel, Daten usw. festlegen. chart方法来创建矩形树图表。在chart方法中，我们需要指定图表的类型为rectangularTree，同时设置好其他必要的属性，如标题、数据等。
下面是一个创建矩形树图表的代码示例：
Highcharts.chart('container', {
chart: {
type: 'rectangularTree'
},
title: {
text: '矩形树图表示例'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
levelIsConstant: false,
data: [data]
}]
});在上面的代码中，我们指定了图表类型为rectangularTree，设置了标题为矩形树图表示例。接着，在series属性中定义了一个treemap系列，设置了布局算法为squarified，允许点击节点进行钻取，以及设置了数据为我们准备好的数据[data]
rrreee
Im obigen Code haben wir den Diagrammtyp alsrectangularTree angegeben und den Titel als Rectangular Tree Chart Beispiel code>. Als nächstes wird eine <code>treemap-Serie im series-Attribut definiert, der Layout-Algorithmus wird auf squarified gesetzt, sodass Knoten zum Bohren angeklickt werden können, und die für uns vorbereiteten Daten [data]. Schritt 4: Vorschau im BrowserAbschließend zeigen wir eine Vorschau der HTML-Datei im Browser an und Sie können das generierte rechteckige Baumdiagramm sehen. Das Diagramm zeichnet automatisch Rechtecke basierend auf der hierarchischen Struktur der Daten und kann durch Klicken auf Knoten erweitert und reduziert werden. 🎜🎜Durch die oben genannten Schritte haben wir mit Highcharts erfolgreich ein rechteckiges Baumdiagramm erstellt und ein spezifisches Codebeispiel gezeigt. Sie können den Layoutalgorithmus, den Stil und andere Attribute an Ihre eigenen Bedürfnisse anpassen und das gewünschte rechteckige Baumdiagramm basierend auf Ihren eigenen Daten erstellen. Highcharts bietet eine Fülle von Konfigurationsmöglichkeiten, mit denen wir individuellere Effekte erzielen können. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, mit Highcharts ein rechteckiges Baumdiagramm zu erstellen! 🎜Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Highcharts ein rechteckiges Baumdiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!