How to create a rectangular tree chart using Highcharts-JS Tutorial-php.cn

How to create a rectangular tree chart using Highcharts

WBOY

Release： 2023-12-18 08:25:22

Original

735 people have browsed it

How to create a rectangular tree chart using Highcharts

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>

Copy after login

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: []
    }
  ]
};

Copy after login

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

Copy after login

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!