Highcharts 树状图(Treemap) - Highcharts 基础教程 - [ Highcharts ]

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

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

树状图

series 配置

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

var chart = {
   type: 'treemap'
};

实例

文件名：highcharts_tree_map.htm

<html>
<head>
<title>Highcharts 教程 | 手册网(shouce.ren)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/try/demo_source/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>
<title>Highcharts 教程 | 手册网(shouce.ren)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/try/demo_source/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>
<title>Highcharts Tutorial</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/try/demo_source/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>