Highcharts 树状图(Treemap)
Highcharts 树状图(Treemap)
一、简介
Highcharts是一款功能强大的JavaScript图形库，可用于创建各种类型的交互性图表。其中TreeMap是一种可用于呈现树状结构数据的图形，图形呈现以矩形的形式展现，气泡越大代表数据越多。
二、如何使用
1. 引入Highcharts库
<script src="https://code.highcharts.com/highcharts.js"></script>
2. 定义容器
在HTML文件中，定义一个用于显示图表的div容器，设置其高度和宽度，如：
<div id="container" style="height: 500px; width: 100%;"></div>
3. 图表配置
Highcharts.chart('container', {
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
}]
}]
});
4. 配置项说明
常用的配置项如下：
- type：图表类型，treemap为树状图
- layoutAlgorithm：布局算法，squarified为矩形显示
- data：数据，包含name、value和colorValue等属性
三、常用配置
1. 外观
可通过配置项中的colorByPoint属性指定每个数据节点的颜色，如下：
Highcharts.chart('container', {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
colorByPoint: true,
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
}]
}]
});
可通过配置项中的borderWidth属性给每个数据节点加上边框。
2. 交互性
可通过配置项中的allowDrillToNode属性实现节点之间的交互，如：
Highcharts.chart('container', {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
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
}]
}]
});
3. 数据格式
可通过配置项中的级联数据格式实现数据的分层显示，如：
Highcharts.chart('container', {
chart: {
height: '100%'
},
series: [{
type: "treemap",
data: treeData
}]
});
treeData数据格式为：
[{
name: "总部",
value: 100,
colorValue: 1,
children: [{
name: "部门1",
value: 60,
colorValue: 2,
children: [{
name: "员工1",
value: 30,
colorValue: 3
}, {
name: "员工2",
value: 30,
colorValue: 4
}]
}, {
name: "部门2",
value: 20,
colorValue: 5,
children: [{
name: "员工3",
value: 10,
colorValue: 6
}, {
name: "员工4",
value: 10,
colorValue: 7
}]
}, {
name: "部门3",
value: 20,
colorValue: 8,
children: [{
name: "员工5",
value: 10,
colorValue: 9
}, {
name: "员工6",
value: 10,
colorValue: 10
}]
}]
}]
四、总结
Highcharts Treemap树状图是一种适用于树状结构数据展示的图表类型，提供了丰富的外观样式、交互性和数据格式，能够满足各种数据展示需求。