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

So verwenden Sie ein Sunburst-Diagramm zur Anzeige von Daten in Highcharts

Ein Sunburst-Diagramm ist ein visuelles Diagramm mit einer hierarchischen Struktur, das zur Darstellung der hierarchischen Beziehung und der proportionalen Beziehung von Daten verwendet werden kann. In Highcharts können wir ein Sunburst-Diagramm erstellen, indem wir relevante Parameter festlegen und geeignete Datenformate verwenden. In diesem Artikel wird erläutert, wie Sie mit der Highcharts-Bibliothek ein Sunburst-Diagramm erstellen, und es wird ein Beispielcode als Referenz bereitgestellt.

1. Datenformat

In Highcharts ist das Datenformat des Sunburst-Diagramms baumförmige Daten, die auf einer hierarchischen Struktur basieren. Jeder Knoten enthält die folgenden Attribute:

• Name: Knotenname
• Wert: der Wert des Knotens, der zur Bestimmung der Größe des Knotens verwendet wird (kann eine Zahl oder eine Zeichenfolge sein)
• Kinder: Array von untergeordneten Knoten, Stellt den aktuellen Knoten dar Untergeordneter Knoten

Das Folgende ist ein einfaches Datenbeispiel:

{
    name: "总部",
    value: 1000,
    children: [
        {
            name: "部门A",
            value: 500,
            children: [
                {
                    name: "小组A1",
                    value: 200
                },
                {
                    name: "小组A2",
                    value: 300
                }
            ]
        },
        {
            name: "部门B",
            value: 500,
            children: [
                {
                    name: "小组B1",
                    value: 200
                },
                {
                    name: "小组B2",
                    value: 300
                }
            ]
        }
    ]
}

2. Codebeispiel

Das Folgende ist ein einfaches Codebeispiel für ein Sunburst-Diagramm:

Highcharts.chart('container', {
    chart: {
        type: 'sunburst'
    },
    title: {
        text: '旭日图示例'
    },
    series: [{
        data: [
            {
                name: "总部",
                value: 1000,
                color: '#FAD107',
                children: [
                    {
                        name: "部门A",
                        value: 500,
                        color: '#34C1FE',
                        children: [
                            {
                                name: "小组A1",
                                value: 200,
                                color: '#FF0084'
                            },
                            {
                                name: "小组A2",
                                value: 300,
                                color: '#FF47A3'
                            }
                        ]
                    },
                    {
                        name: "部门B",
                        value: 500,
                        color: '#68C600',
                        children: [
                            {
                                name: "小组B1",
                                value: 200,
                                color: '#FF8000'
                            },
                            {
                                name: "小组B2",
                                value: 300,
                                color: '#FFA935'
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

Im obigen Code verwenden wir chart Das Objekt legt den Diagrammtyp auf Sunburst-Diagramm fest. Das Attribut data in series ist ein Array, das zum Speichern von Sunburst-Diagrammdaten verwendet wird. Jeder Knoten wird mithilfe der Attribute name, value und color definiert. Durch Festlegen des Attributs children können Sie hierarchische Beziehungen verschachteln. chart对象设置图表类型为旭日图。series中的data属性是一个数组，用来存储旭日图的数据。每个节点都使用name、value和color属性来定义。通过设置children属性，可以嵌套表示层级关系。

三、图表属性和样式调整

Highcharts提供了丰富的属性和方法，用来调整旭日图的样式和行为。以下是一些常用属性：

• chart.polar：布尔值，用于指定是否为极坐标图。默认为false。
• chart.startAngle：数字，用于指定旭日图的起始角度。默认为0。
• series.dataLabels.format：字符串，用于指定数据标签的显示格式。支持占位符，如{point.node.name}表示节点名称。
• series.levels
3. Diagrammeigenschaften und Stilanpassung

Highcharts bietet eine Fülle von Eigenschaften und Methoden zum Anpassen des Stils und Verhaltens des Sunburst-Diagramms. Im Folgenden sind einige allgemeine Eigenschaften aufgeführt:

chart.polar: Boolescher Wert, der verwendet wird, um anzugeben, ob es sich um ein Polardiagramm handelt. Der Standardwert ist false.

chart.startAngle: Zahl, die zur Angabe des Startwinkels des Sunburst-Diagramms verwendet wird. Der Standardwert ist 0. 🎜🎜series.dataLabels.format: Zeichenfolge, die zur Angabe des Anzeigeformats von Datenbeschriftungen verwendet wird. Unterstützt Platzhalter wie {point.node.name} zur Darstellung des Knotennamens. 🎜🎜series.levels: wird zum Definieren von Stilen auf verschiedenen Ebenen verwendet. Sie können die Farbe, den Erweiterungsradius usw. verschiedener Ebenen festlegen. 🎜🎜🎜Weitere Einzelheiten zur Attribut- und Stilanpassung finden Sie in der offiziellen Dokumentation von Highcharts. 🎜🎜4. Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie Sunburst-Diagramme zum Anzeigen von Daten in Highcharts verwenden, und es werden Codebeispiele bereitgestellt. Das Sunburst-Diagramm ist ein visuelles Diagramm, das sich zur Darstellung hierarchischer Beziehungen und proportionaler Beziehungen eignet und zur Datenanalyse und -präsentation verwendet werden kann. Durch Festlegen des geeigneten Datenformats und Anpassen der zugehörigen Eigenschaften können wir verschiedene Arten von Sunburst-Diagrammen erstellen, um unterschiedliche Anforderungen zu erfüllen. Ich hoffe, dieser Artikel wird Ihnen bei der Erstellung eines Sunburst-Diagramms mit Highcharts hilfreich sein. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Sunburst-Diagramm, um Daten in Highcharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!