减小字体
增大字体- ·上一篇文章：Highcharts 测量图
- ·下一篇文章：Google API 教程,Google API
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
Highcharts 树状图(Treemap)
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 教程 | k88.net(k88.net)</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 教程 | k88.net(k88.net)</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 教程 | k88.net(k88.net)</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 =
'treemap'};实例文件名：highcharts_tree_map.htm<html><head><meta charset="UTF-8" /><title>Highcharts 教程 | k88.net(k88.net)</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 教程 | k88.net(k88.net)</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 教程 | k88.net(k88.net)</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 =
Highcharts 树状图(Treemap)
