Home > Article > Web Front-end > How to create a rectangular tree chart using Highcharts
How to create a rectangular tree chart using Highcharts
- WBOYOriginal
- 2023-12-18 08:25:22733browse
How to use Highcharts to create a rectangular tree chart
Highcharts is a popular JavaScript chart library that provides a wealth of chart types for us to use. One of them is the rectangular tree diagram, which allows us to display hierarchical data in a visual way. This article will introduce how to use Highcharts to create a rectangular tree chart and provide specific code examples.
Step 1: Install and introduce Highcharts
First, we need to download the Highcharts library file from the Highcharts official website and introduce it into our project. It can be obtained in the following two ways:
- Download the Highcharts library file and introduce it into the HTML file
- Install Highcharts through npm and introduce it into the project
The following is the code that introduces the Highcharts library in a sample HTML file:
<!DOCTYPE html> <html> <head> <title>矩形树图表示例</title> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container"></div> </body> </html>
Step 2: Prepare data
Before creating a rectangular tree chart, we need to prepare the hierarchical structure data. The data format of the rectangular tree chart is a nested array of objects. Each object contains name (node name) and value (node value) attributes, as well as the children attribute (an array containing child nodes). The following is a sample data:
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: []
}
]
};Step 3: Create a rectangular tree chart
Next, we can use the chart method of Highcharts to create a rectangular tree chart. In the chart method, we need to specify the type of chart as rectangularTree, and set other necessary attributes, such as title, data, etc.
The following is a code example to create a rectangular tree chart:
Highcharts.chart('container', {
chart: {
type: 'rectangularTree'
},
title: {
text: '矩形树图表示例'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
levelIsConstant: false,
data: [data]
}]
});In the above code, we specified the chart type as rectangularTree and set the title to Rectangular tree chart example. Next, a treemap series is defined in the series attribute, the layout algorithm is set to squarified, the node is allowed to be clicked for drilling, and the data is set for us Prepared data[data].
Step 4: Preview in the browser
Finally, we preview the HTML file in the browser, and you can see the generated rectangular tree chart. The chart automatically draws rectangles based on the hierarchical structure of the data and can be expanded and collapsed by clicking on nodes.
Through the above steps, we successfully created a rectangular tree chart using Highcharts and showed a specific code example. You can adjust the layout algorithm, style and other attributes according to your own needs, and generate the rectangular tree chart you want based on your own data. Highcharts provides a wealth of configuration options that can help us achieve more customized effects. I hope this article can help you create a rectangular tree chart using Highcharts!
The above is the detailed content of How to create a rectangular tree chart using Highcharts. For more information, please follow other related articles on the PHP Chinese website!