矩形树图Treemap布局算法深度解析：基于Highcharts实现带层级交互的矩形树图
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 树状图提供了四种预设算法。
切片与切割
简单且快速的算法，非常适合组织点。使用“切片与骰子”算法的缺点是节点的长宽比可能变得非常糟糕，从而变得难以比较。这种情况在数据集较大时经常发生。
查看一个切片与切割的示例 example 。
条纹
这也是一种简单的算法，非常类似于切片与骰子（Slice And Dice）。不同之处在于，它不会在每个节点之间交替方向，而是沿着同一方向绘制所有节点，形成一组列。
查看一个条纹的示例example 。
方形化
一种旨在为每个点提供较低长宽比的算法。它会逐个将点添加到一条带中，直到找到最佳的长宽比，然后改变方向，用新的带重复相同的过程。这个过程按照相同的模式持续进行，直到所有点都放置在图表中。
查看一个方形化的示例 example .
裁剪
不要误以为这是条纹算法，它在行为上有一些明显的不同。 条纹算法的目标与平方化算法相同，都是为了获得较低的长宽比。这个过程非常相似，但不是交替改变方向，而是将条纹作为列并排绘制。
查看一个条带的示例 example 。
添加你自己的算法
你是否想使用另一种算法，或者更高级的版本？在Highcharts的树状图中添加新算法是相当简单的任务。具体流程如下：
首先创建包含该算法的函数。该函数有两个参数。第一个参数是一个包含父对象详细信息的对象，第二个参数是一个对象数组，每个对象包含一个子项的详细信息。
父对象传递的变量如下：
- Number x // 数字 x // 父元素的x位置
- Number y // 数字 y // 父元素的y位置
- Number width // 数字 宽度 // 父元素的宽度
- Number height // 数字 高度 // 父元素的高度
- String direction // 字符串方向 // 起始方向，可以是垂直或水平，子元素应沿此方向绘制
- Number val // 数字值 // 所有子元素值的总和
传递的每个子元素具有以下变量：
- Number val // 数字 数值 // 点的值
- Number level // 数字层级 // 节点在树中的层级
一个起始点可以是以下内容
functionmyFunction(parent, children){ childrenAreas =[]; children.forEach(function(child){// Do some calculations// These return values are required for each child childrenAreas.push({x: someXValue,y: someYValue,width: someWidth,height: someHeight });});return childrenAreas;};当算法函数完成后，我们需要通过扩展treemap原型来添加该函数
Highcharts.seriesTypes.treemap.prototype.myCustomAlgorithm = myFunction;之后在声明图表选项时，应指定series.layoutAlgorithm为你的新自定义算法
const chart =newHighcharts.Chart({...series:[{layoutAlgorithm:"myCustomAlgorithm",...}],...});使用层级
levels 选项允许在特定层级设置选项。这在每当数据树中的某一层级上的所有点都需要突出显示并与系列中的其他点不同的时候非常有用。
以下是一个示例，第一层将使用“切片与切块”算法，其余层将使用“方形化”算法。此外，所有第二层的点都将被着色为蓝色，而其他点将为红色。
const chart =newHighcharts.Chart({...series:[{layoutAlgorithm:'squarified',color:'red',levels:[{level:1,layoutAlgorithm:'sliceAndDice'},{level:2,color:'blue'}],...}],...});层级是恒定的：
levelIsConstant 选项与层级和 allowTraversingTree 选项一起使用。默认情况下，它设置为 true。当设置为 false 时，钻取时可见的第一层被视为第一层。否则，层级将与树结构中的层级相同。
一个示例 example，其中levelIsConstant被设置为假。
遍历层级
当 allowTraversingTree 选项为 true 时，点击某个点将把该点设为渲染的根节点。为了帮助导航各层，渲染了面包屑，显示一个返回上一级的按钮或返回到根节点的完整路径。
了解更多关于面包屑导航的信息 这里。here.
分组标题和数据标签
数据标签可以像应用于其他系列一样应用于树图，默认的数据层级位置在节点的中心。可以为每个层级指定数据标签。
一种特殊的数据标签形式是分组标题。要启用分组标题功能，请将
dataLabels.headers
选项设置为 true。最常用的应用标题的方法是在特定层级上启用它们。默认情况下，标题会占据分组节点内的空间，导致剩余空间减少，从而影响叶子节点的显示。这可能会导致叶子节点之间的相对大小失衡。为了避免这种情况，有一个实验性选项
nodeSizeBy,
可以将其设置为空leaf.
与 ColorAxis 一起使用
如果要与colorAxis一起使用，则必须同时包含modules/heatmap.js。
在将模块包含到你的项目中后，可以在图表选项中定义一个colorAxis对象。有关其选项的详细信息，请阅读 API .
const chart =newHighcharts.Chart({...colorAxis:{minColor:'#FFFFFF',maxColor: Highcharts.getOptions().colors[0]},...});每个点都需要自己的 colorValue.
const chart =newHighcharts.Chart({...colorAxis:{...},series:[{...data:[{name:"Point 1",value:1,colorValue:5// This value decides which color on the scale that the point gets.}],...}],...});小点的树状图聚类
树状图聚类通过将数据点组织成更大的块，简化了大量数据的可视化，增强了可读性和性能。这种方法特别适合用紧凑、易于理解的格式展示海量信息。
要配置树状图聚类，可以使用cluster选项。在此选项中，您可以指定pixelWidth和pixelHeight，它们设置在区域被分组之前的最小像素大小。这些阈值确保较小的部分被合并成更大、更明显的区域，以提高可读性。name参数允许您为分组的节点定义自定义标签，这些标签会显示在工具提示、数据标签和其他图表元素中。有关其选项的详细信息，请查阅e API .
const chart =newHighcharts.Chart({...series:[{...type:"treemap",cluster:{enabled:true,pixelHeight:20,pixelWidth:10}...}],...});Options
有关树图选项的概述，请参阅 API.
