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

How to create a pyramid chart using Highcharts

王林

Release： 2023-12-17 22:18:46

Original

1232 people have browsed it

How to create a pyramid chart using Highcharts

How to use Highcharts to create a pyramid chart

Introduction:
The pyramid chart is a visualization tool used to display hierarchical relationships, which can visually present the distribution of data situation and proportional relationships. In data analysis and decision support, pyramid charts are often used to represent the proportions of different levels or the distribution of groups. In this article, we will introduce how to use the Highcharts library to create pyramid charts and give detailed code examples.

Step 1: Import the Highcharts library
First, we need to introduce the Highcharts library file into HTML. This can be done by adding the following code in the

tag:

<script src="https://code.highcharts.com/highcharts.js"></script>

Copy after login

Step 2: Create a container
In HTML, we need to create a container element for displaying the pyramid chart. A

element can be created by adding the following code:

<div id="container" style="width: 500px; height: 400px;"></div>

Copy after login

Step 3: Define the data
In JavaScript, we need to define the data required for the pyramid chart. Specifically, we need to define the name and value of the data. Data can be defined through the following code:

var data = [
  {
    name: '第一层级',
    value: 30
  },
  {
    name: '第二层级',
    value: 50
  },
  {
    name: '第三层级',
    value: 70
  }
];

Copy after login

Step 4: Create a pyramid chart
In JavaScript, we can use Highcharts to create a pyramid chart. First, we need to create a basic chart object through the Highcharts.chart() method and specify the ID of the container element. Then, we can set the chart configuration items through the options attribute. A pyramid chart can be created through the following code:

Highcharts.chart('container', {
  chart: {
    type: 'pyramid'
  },
  title: {
    text: '金字塔图表示例'
  },
  series: [{
    name: '金字塔图',
    data: data
  }]
});

Copy after login

Step 5: Set the style and interactive effects of the pyramid chart
The style and interactive effects of the pyramid chart can be changed by setting the configuration items of the chart. The following are some examples of commonly used configuration items:

title: {
  text: '金字塔图表示例',
  style: {
    color: '#333',
    fontSize: '18px',
    fontWeight: 'bold'
  }
},
plotOptions: {
  pyramid: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y}%',
      color: '#333'
    }
  }
},
tooltip: {
  formatter: function() {
    return this.point.name + ': ' + this.point.y + '%';
  }
}

Copy after login

Summary:
Through the above steps, we can use the Highcharts library to create a pyramid chart and customize the style and interactive effects of the chart as needed. I hope this article can help readers better use Highcharts to create pyramid charts and apply them to data analysis and decision support work.

Reference link: https://www.highcharts.com/docs/chart-and-series-types/pyramid-chart

The above is the detailed content of How to create a pyramid chart using Highcharts. For more information, please follow other related articles on the PHP Chinese website!