Highcharts 树状图(Treemap)

本章节我们将为大家介绍 Highcharts 的热点图。

我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。

树状图

series 配置

设置 series 的 type 属性为 treemap ，series.type 描述了数据列类型。默认值为 "line"。

var chart = {
   type: 'treemap'
};

实例

文件名：highcharts_tree_map.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 代码学院(codexy.cn)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {    
   var title = {
      text: 'Highcharts Treemap'   
   };       
   
   var colorAxis = {
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
   };
   
   var series= [{
     type: "treemap",
     layoutAlgorithm: 'squarified',
     data: [{
        name: 'A',
        value: 6,
        colorValue: 1
     }, {
        name: 'B',
        value: 6,
        colorValue: 2
     }, {
        name: 'C',
        value: 4,
        colorValue: 3
     }, {
        name: 'D',
        value: 3,
        colorValue: 4
     }, {
        name: 'E',
        value: 2,
        colorValue: 5
     }, {
        name: 'F',
        value: 2,
        colorValue: 6
     }, {
        name: 'G',
        value: 1,
        colorValue: 7
     }]
   }];     
      
   var json = {};     
   json.title = title;          
   json.colorAxis = colorAxis;   
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为：

不同等级树状图

以下实例使用不同颜色来标识不同等级的树状图。

实例

文件名：highcharts_tree_levels.htm（完整源码请点击实例查看）

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 代码学院(codexy.cn)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {    
   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 json = {};     
   json.title = title;            
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为：

大数据量树状图

以下实例颜色了大数据量的树状图，具体实例数据可通过点击"尝试一下"查看。

文件名：highcharts_tree_largemap.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 代码学院(codexy.cn)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>   
<script src="http://code.highcharts.com/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
//省略部分 js 代码
 var data = {……};
 var points = [],
        region_p,
        region_val,
        region_i,
        country_p,
        country_i,
        cause_p,
        cause_i,
        cause_name = [];
    cause_name['Communicable & other Group I'] = 'Communicable diseases';
    cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
    cause_name['Injuries'] = 'Injuries';
    region_i = 0;
    for (var region in data) {
        region_val = 0;
        region_p = {
            id: "id_" + region_i,
            name: region,
            color: Highcharts.getOptions().colors[region_i]
        };
        country_i = 0;
        for (var country in data[region]) {
            country_p = {
                id: region_p.id + "_" + country_i,
                name: country,
                parent: region_p.id
            };
            points.push(country_p);
            cause_i = 0;
            for (var cause in data[region][country]) {
                cause_p = {
                    id: country_p.id + "_" + cause_i,
                    name: cause_name[cause],
                    parent: country_p.id,
                    value: Math.round(+data[region][country][cause])
                };
                region_val += cause_p.value;
                points.push(cause_p);
                cause_i++;
            }
            country_i++;
        }
        region_p.value = Math.round(region_val / country_i);
        points.push(region_p);
        region_i++;
    }
   var chart = {
      renderTo: 'container'
   };

   var title = {
      text: 'Global Mortality Rate 2012, per 100 000 population'   
   };        
   
   var subtitle: {
      text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
   };
   
   var series = [{
      type: "treemap",
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      dataLabels: {
         enabled: false
      },
      levelIsConstant: false,
      levels: [{
         level: 1,
         dataLabels: {
            enabled: true
         },
      borderWidth: 3
      }],
      data: points
   }]; 
      
   var json = {};     
   json.title = title;            
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为：