导读 Highcharts 是一个用纯JavaScript编写的一个图表库。Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。

树状图
series 配置

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

var chart = {
   type: 'treemap'
};
实例

文件名：highcharts_tree_map.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/treemap.js"></script>    
<script src="//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>

以上实例输出结果为：

Created with Highcharts 9.2.2Highcharts TreemapA​AB​BC​CD​DE​EF​FG​G02468Highcharts.comA: 6​
不同等级树状图

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

实例

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

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/treemap.js"></script>    
<script src="//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>

以上实例输出结果为：

彩票走势图

Created with Highcharts 9.2.2Fruit consumptionApples​ApplesBananas​BananasOranges​OrangesAnne​AnneRick​RickPeter​PeterAnne​AnneRick​RickPeter​PeterAnne​AnneRick​RickPeter​PeterSusanne​SusanneHighcharts.comRick: 10​

大数据量树状图

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

文件名：highcharts_tree_largemap.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>   
<script src="//code.highcharts.com/modules/treemap.js"></script>    
<script src="//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,
     &nbsp;  region_i,
        country_p,
   &nbsp;    country_i,
      &nbsp; cause_p,
    &nbsp;   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 = {
        &nbsp;   id: "id_" + region_i,
        ;   &nbsp;name: region,
     &nbsp;  &nbsp;   color: Highcharts.getOptions().colors[region_i]
&nbsp;       };
&nbsp;       country_i = 0;
     &nbsp;  for (var country in data[region]) {
            country_p = {
         &nbsp;      id: region_p.id + "_" + country_i,
            &nbsp;   name: country,
    &nbsp;           parent: region_p.id
 &nbsp;      &nbsp;   };
    &nbsp;    &nbsp;  points.push(country_p);
          ;  cause_i = 0;
&nbsp;      &nbsp;    for (var cause in data[region][country]) {
              &nbsp; cause_p = {
             &nbsp;     &nbsp;id: country_p.id + "_" + cause_i,
     &nbsp;              name: cause_name[cause],
           &nbsp;        parent: country_p.id,
      &nbsp;             value: Math.round(+data[region][country][cause])
    &nbsp;    &nbsp;      };
             &nbsp;  region_val += cause_p.value;
                points.push(cause_p);
     &nbsp;   &nbsp;      cause_i++;
            }
       ;   &nbsp; country_i++;
     &nbsp;  }
&nbsp;       region_p.value = Math.round(region_val / country_i);
    &nbsp;   points.push(region_p);
&nbsp;       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="//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>

以上实例输出结果为：

彩票走势图

Created with Highcharts 9.2.22012年全球死亡率到，每10万人口通过点击钻入，获取更详细数据South-East Asia​South-East AsiaEurope​EuropeAfrica​AfricaAmericas​AmericasEastern Mediterranean​Eastern MediterraneanWestern Pacific​Western PacificHighcharts.comAfrica: 1 443​

原文来自：

本文地址：//gulass.cn/the-highcharts-treemap.html编辑：吴康宁，审核员：逄增宝

Linux大全：

Linux系统大全：

红帽认证RHCE考试心得：