课程表

Highcharts课程

工具箱
速查手册

Highcharts 树状图

当前位置：免费教程 » JS/JS库/框架 » Highcharts

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

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

树状图

series 配置

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

  1. var chart = {
  2.    type: 'treemap'
  3. };

实例

文件名：highcharts_tree_map.htm

  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
  5. <script src="/js/jquery-2.1.4.min.js"></script>
  6. <script src="http://code.highcharts.com/highcharts.js"></script>
  7. <script src="http://code.highcharts.com/modules/treemap.js"></script>    
  8. <script src="http://code.highcharts.com/modules/heatmap.js"></script>  
  9. </head>
  10. <body>
  11. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  12. <script language="JavaScript">
  13. $(document).ready(function() {    
  14.    var title = {
  15.       text: 'Highcharts Treemap'   
  16.    };       
  17.    
  18.    var colorAxis = {
  19.       minColor: '#FFFFFF',
  20.       maxColor: Highcharts.getOptions().colors[0]
  21.    };
  22.    
  23.    var series= [{
  24.      type: "treemap",
  25.      layoutAlgorithm: 'squarified',
  26.      data: [{
  27.         name: 'A',
  28.         value: 6,
  29.         colorValue: 1
  30.      }, {
  31.         name: 'B',
  32.         value: 6,
  33.         colorValue: 2
  34.      }, {
  35.         name: 'C',
  36.         value: 4,
  37.         colorValue: 3
  38.      }, {
  39.         name: 'D',
  40.         value: 3,
  41.         colorValue: 4
  42.      }, {
  43.         name: 'E',
  44.         value: 2,
  45.         colorValue: 5
  46.      }, {
  47.         name: 'F',
  48.         value: 2,
  49.         colorValue: 6
  50.      }, {
  51.         name: 'G',
  52.         value: 1,
  53.         colorValue: 7
  54.      }]
  55.    }];     
  56.       
  57.    var json = {};     
  58.    json.title = title;          
  59.    json.colorAxis = colorAxis;   
  60.    json.series = series;       
  61.    
  62.    $('#container').highcharts(json);
  63. });
  64. </script>
  65. </body>
  66. </html>

我来试一下

以上实例输出结果为：

不同等级树状图

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

实例

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

  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
  5. <script src="/js/jquery-2.1.4.min.js"></script>
  6. <script src="http://code.highcharts.com/highcharts.js"></script>
  7. <script src="http://code.highcharts.com/modules/treemap.js"></script>    
  8. <script src="http://code.highcharts.com/modules/heatmap.js"></script>  
  9. </head>
  10. <body>
  11. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  12. <script language="JavaScript">
  13. $(document).ready(function() {    
  14.    var title = {
  15.       text: 'Fruit consumption'   
  16.    };        
  17.    
  18.    var series = [{
  19.       type: "treemap",
  20.       layoutAlgorithm: 'stripes',
  21.       alternateStartingDirection: true,
  22.       levels: [{
  23.          level: 1,
  24.          layoutAlgorithm: 'sliceAndDice',
  25.          dataLabels: {
  26.             enabled: true,
  27.             align: 'left',
  28.             verticalAlign: 'top',
  29.             style: {
  30.                fontSize: '15px',
  31.                fontWeight: 'bold'
  32.             }
  33.          }
  34.       }],
  35.       data: [{
  36.          id: 'A',
  37.          name: 'Apples',
  38.          color: "#EC2500"
  39.       }, {
  40.          id:'B',
  41.          name: 'Bananas',
  42.          color: "#ECE100"
  43.       }, {
  44.          id: 'O',
  45.          name: 'Oranges',
  46.          color: '#EC9800'
  47.       }, {
  48.          name: 'Anne',
  49.          parent: 'A',
  50.          value: 5
  51.       }, {
  52.          name: 'Rick',
  53.          parent: 'A',
  54.          value: 3
  55.       }, {
  56.          name: 'Peter',
  57.          parent: 'A',
  58.          value: 4
  59.       }, {
  60.          name: 'Anne',
  61.          parent: 'B',
  62.          value: 4
  63.       }, {
  64.          name: 'Rick',
  65.          parent: 'B',
  66.          value: 10
  67.       }, {
  68.          name: 'Peter',
  69.          parent: 'B',
  70.          value: 1
  71.       }, {
  72.          name: 'Anne',
  73.          parent: 'O',
  74.          value: 1
  75.       }, {
  76.          name: 'Rick',
  77.          parent: 'O',
  78.          value: 3
  79.       }, {
  80.          name: 'Peter',
  81.          parent: 'O',
  82.          value: 3
  83.       }, {
  84.          name: 'Susanne',
  85.          parent: 'Kiwi',
  86.          value: 2,
  87.          color: '#9EDE00'
  88.       }]
  89.    }]; 
  90.       
  91.    var json = {};     
  92.    json.title = title;            
  93.    json.series = series;       
  94.    
  95.    $('#container').highcharts(json);
  96. });
  97. </script>
  98. </body>
  99. </html>

我来试一下

以上实例输出结果为：

大数据量树状图

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

文件名：highcharts_tree_largemap.htm

  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
  5. <script src="/js/jquery-2.1.4.min.js"></script>
  6. <script src="http://code.highcharts.com/highcharts.js"></script>   
  7. <script src="http://code.highcharts.com/modules/treemap.js"></script>    
  8. <script src="http://code.highcharts.com/modules/heatmap.js"></script>  
  9. </head>
  10. <body>
  11. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  12. <script language="JavaScript">
  13. $(document).ready(function() { 
  14. //省略部分 js 代码
  15.  var data = {……};
  16.  var points = [],
  17. 		region_p,
  18. 		region_val,
  19. 		region_i,
  20. 		country_p,
  21. 		country_i,
  22. 		cause_p,
  23. 		cause_i,
  24. 		cause_name = [];
  25. 	cause_name['Communicable & other Group I'] = 'Communicable diseases';
  26. 	cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
  27. 	cause_name['Injuries'] = 'Injuries';
  28. 	region_i = 0;
  29. 	for (var region in data) {
  30. 		region_val = 0;
  31. 		region_p = {
  32. 			id: "id_" + region_i,
  33. 			name: region,
  34. 			color: Highcharts.getOptions().colors[region_i]
  35. 		};
  36. 		country_i = 0;
  37. 		for (var country in data[region]) {
  38. 			country_p = {
  39. 				id: region_p.id + "_" + country_i,
  40. 				name: country,
  41. 				parent: region_p.id
  42. 			};
  43. 			points.push(country_p);
  44. 			cause_i = 0;
  45. 			for (var cause in data[region][country]) {
  46. 				cause_p = {
  47. 					id: country_p.id + "_" + cause_i,
  48. 					name: cause_name[cause],
  49. 					parent: country_p.id,
  50. 					value: Math.round(+data[region][country][cause])
  51. 				};
  52. 				region_val += cause_p.value;
  53. 				points.push(cause_p);
  54. 				cause_i++;
  55. 			}
  56. 			country_i++;
  57. 		}
  58. 		region_p.value = Math.round(region_val / country_i);
  59. 		points.push(region_p);
  60. 		region_i++;
  61. 	}
  62.    var chart = {
  63.       renderTo: 'container'
  64.    };
  65.  
  66.    var title = {
  67.       text: 'Global Mortality Rate 2012, per 100 000 population'   
  68.    };        
  69.    
  70.    var subtitle: {
  71.       text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
  72.    };
  73.    
  74.    var series = [{
  75.       type: "treemap",
  76.       layoutAlgorithm: 'squarified',
  77.       allowDrillToNode: true,
  78.       dataLabels: {
  79.          enabled: false
  80.       },
  81.       levelIsConstant: false,
  82.       levels: [{
  83.          level: 1,
  84.          dataLabels: {
  85.             enabled: true
  86.          },
  87.       borderWidth: 3
  88.       }],
  89.       data: points
  90.    }]; 
  91.       
  92.    var json = {};     
  93.    json.title = title;            
  94.    json.series = series;       
  95.    
  96.    $('#container').highcharts(json);
  97. });
  98. </script>
  99. </body>
  100. </html>

我来试一下

以上实例输出结果为：

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号