Treemap 矩形树图
需求
该树状图需要文件 modules/treemap.js。若要与 colorAxis 一起使用,还必须包含 modules/heatmap.js。
数据结构
数据的结构是一个树 tree,每个点代表一个节点。每个节点都可以有自己的子节点。
树会自动在顶部创建一个节点,代表根节点。如果某个点没有定义父节点,或者父节点的 ID 不存在,父节点将会自动设置为根节点。
以下是 Highcharts 中树的构建示例:
data: [
{name: 'I have children', id: 'id-1'},
{name: 'I am a child', parent: 'id-1', value: 2},
{name: 'I am a smaller child', parent: 'id-1', value: 1}
]
布局算法
算法决定点的位置和大小。你使用的算法将会在很大程度上影响图表的外观。Highcharts 树状图提供了四种预设算法。
切片与切割 (Slice And Dice)
简单且快速的算法,非常适合组织点。使用'切片与骰子'算法的缺点是节点的长宽比可能变得非常糟糕,从而变得难以比较。这种情况在数据集较大时经常发生。
查看一个切片与切割的示例 example。
条纹 (Stripes)
这也是一种简单的算法,非常类似于切片与切割(Slice And Dice)。不同之处在于,它不会在每个节点之间交替方向,而是沿着同一方向绘制所有节点,形成一组列。
查看一个条纹的示例 example。
方形化 (Squarified)
一种旨在为每个点提供较低长宽比的算法。它会逐个将点添加到一条带中,直到找到最佳的长宽比,然后改变方向,用新的带重复相同的过程。这个过程按照相同的模式持续进行,直到所有点都放置在图表中。
查看一个方形化的示例 example。

