Highcharts 树状图(Treemap)

Highcharts 树状图(Treemap)
2021年08月12日12:52:22 0 506

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 教程 | 菜鸟教程(58how.com)</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 教程 | 菜鸟教程(58how.com)</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 教程 | 菜鸟教程(58how.com)</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>

 

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
正则表达式 \w \d 的意义,正则表达式 菜鸟教程

正则表达式 \w \d 的意义

正则表达式 \w \d 的意义 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去匹配符合规则的字符。这篇文章主要介绍了正...
vs ,ode 菜鸟教程

VS Code

VS CodeVisual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编...
正则,表达式,简介,正则,表达式,简介,除非,您, 菜鸟教程

正则表达式 - 简介

正则表达式 -简介 除非您以前使用过正则表达式,否则您可能不熟悉一些术语。但是,毫无疑问,您已经使用过不涉及脚本的某些正则表达式概念。 例如,您很可能使用?和*通配符来查找硬盘上的...
C++,完整,入门教程,附,实践,项目,C++,完整, 菜鸟教程

C++完整入门教程(附实践项目)

C++完整入门教程(附实践项目) 一、C++的特点与OO思想 C语言有一个优点,即它的速度可以很快。写出来的程序可以很精练、简单、小巧,不用为了解决某个问题环绕太平洋一大圈。 但如...

评论列表 共有 0 条评论

暂无评论