Highcharts 基本树状图(Treemap) - 学习 Hightcharts

下图是一个 Highcharts 树状图(Treemap)

配置

配置属性 series.type 为 treemap 即可显示树状图

var series = {
   type: 'treemap'
};

范例

下面的代码列出了 Highcharts 树状图(Treemap) 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/treemap.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/heatmap.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>
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 options = {};

options.title = title;
options.colorAxis = colorAxis;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下