Home > Article > Web Front-end > 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:
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!