Highcharts 不同等级树状图 - 学习 Hightcharts

下图是一个 Highcharts 不同等级树状图

配置

配置属性 series.type 为 'treemap' 即可显示树状图

var series = {
   type: 'treemap'
};

范例

下面的代码列出了 Highcharts 不同等级树状图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/treemap.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/heatmap.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>   
var title = {
   text: 'Fruit consumption'   
};        

var series = [{
   type: "treemap",
   layoutAlgorithm: 'stripes',
   alternateStartingDirection: true,
   levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
         enabled: true,
         align: 'left',
         verticalAlign: 'top',
         style: {
            fontSize: '15px',
            fontWeight: 'bold'
         }
      }
   }],
   data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
   }, {
      id:'B',
      name: 'Bananas',
      color: "#ECE100"
   }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
   }, {
      name: 'Anne',
      parent: 'A',
      value: 5
   }, {
      name: 'Rick',
      parent: 'A',
      value: 3
   }, {
      name: 'Peter',
      parent: 'A',
      value: 4
   }, {
      name: 'Anne',
      parent: 'B',
      value: 4
   }, {
      name: 'Rick',
      parent: 'B',
      value: 10
   }, {
      name: 'Peter',
      parent: 'B',
      value: 1
   }, {
      name: 'Anne',
      parent: 'O',
      value: 1
   }, {
      name: 'Rick',
      parent: 'O',
      value: 3
   }, {
      name: 'Peter',
      parent: 'O',
      value: 3
   }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
   }]
}]; 

var options = {};

options.title = title;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下