How to use sunburst chart to display data in Highcharts

How to use a sunburst chart to display data in Highcharts

The sunburst chart is a visual chart with a hierarchical structure that can be used to display the hierarchical relationship and proportion of data. relation. In Highcharts, we can create a sunburst chart by setting relevant parameters and using appropriate data formats. This article will introduce how to use the Highcharts library to create a sunburst chart and provide some sample code for reference.

1. Data format

In Highcharts, the data format of the sunburst chart is a tree-shaped data based on a hierarchical structure. Each node contains the following attributes:

• name: node name
• value: the value of the node, used to determine the size of the node (can be a number or a string)
• children: array of child nodes, representing the child nodes of the current node

The following is a simple data example:

{
    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. Code example

The following is a basic sunburst chart code example:

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'
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

In the above code, we use the chart object to set the chart type to sunburst chart. The data attribute in series is an array used to store the data of the sunburst chart. Each node is defined using the name, value, and color attributes. By setting the children attribute, you can nest hierarchical relationships.

3. Chart properties and style adjustment

Highcharts provides a wealth of properties and methods for adjusting the style and behavior of the sunburst chart. The following are some common properties:

• chart.polar: Boolean value, used to specify whether it is a polar chart. Default is false.
• chart.startAngle: Number, used to specify the starting angle of the sunburst chart. Default is 0.
• series.dataLabels.format: String used to specify the display format of data labels. Supports placeholders, such as {point.node.name} represents the node name.
• series.levels: used to define styles at different levels. You can set the color, expansion radius, etc. of different levels.

For more details on attribute and style adjustment, please refer to the official documentation of Highcharts.

4. Summary

This article introduces how to use sunburst charts to display data in Highcharts, and provides code examples. The sunburst chart is a visual chart suitable for displaying hierarchical relationships and proportional relationships, and can be used for data analysis and presentation. By setting the appropriate data format and adjusting related properties, we can create various styles of sunburst charts to meet different needs. I hope this article will be helpful to you when creating a sunburst chart using Highcharts.

The above is the detailed content of How to use sunburst chart to display data in Highcharts. For more information, please follow other related articles on the PHP Chinese website!