很多数据并不是"平铺"的，而是天然带着一种古老而优雅的结构------树结构。
组织架构、文件目录、家谱关系、产品分类、算法决策树，本质上都是一棵树。
人类理解这种结构其实很直觉：从一个根开始，向下分叉，一层一层展开。于是就诞生了 Treegraph Chart（树状图 / 结构树图）。
在 Highcharts 的图表体系中，Treegraph 是一种专门用于展示**层级关系（Hierarchy）**的图表，它通过节点与连线构建一棵可交互的结构树，让复杂的关系网络变得清晰可读。
一句话理解：Treegraph = 节点 + 父子关系 + 自动布局算法。
Highcharts Treegraph chart 树状图、结构树图
Tree graph 树图是一种可视化树 tree 或层级数据结构的方式。最典型的树数据结构例子有：
- genealogy trees 家谱树
- directories in computer science 计算机科学中的目录
- decision trees 决策树
我们的树状图表示是一棵有向的有根树。这意味着连接的方向很重要，每组数据中都有一个节点没有父节点（即树的根节点）。与树状图和旭日图不同，这种系列类型不需要 value 属性，因为每个点的位置完全取决于它与树中其他节点的关系。
要使用这个系列类型，你需要加载 modules/treemap.js 和 modules/treegraph.js 模块.
数据结构
数据以一棵树的形式结构化 tree，每个点代表一个节点。每个节点可以有自己的子节点。这棵树的顶部会自动有一个代表根节点的节点。如果某个点的父节点未定义，或者父节点不匹配任何id，那么父节点会自动设置为根节点。可能会有多个没有父节点的节点，它们会被放置成独立的树。
以下是Highcharts中树的构建示例：
js
data: [{
name: 'I have children',
id: 'id-1'
}, {
name: 'I am a child',
parent: 'id-1'
}, {
name: 'I am a smaller child',
parent: 'id-1'
}]算法
算法决定了点的位置。目前有一种算法可用，即用于计算树图中节点位置的Walker 算法。
API 选项
链接
与树状图系列不同，节点之间的连接以链接的形式表示。这些链接是根据子项的选项生成的。链接的形状与组织结构图中的相同，适用的选项也相同。要为所有链接应用通用选项，可以像这样定义链接选项：
js
series: [{
type: 'treegraph',
link: {
type: 'curved',
lineWidth: 3
},
data: [{
name: 'I have children',
id: 'id-1'
}, {
name: 'I am a child',
parent: 'id-1'
}, {
name: 'I am a smaller child',
parent: 'id-1'
}]
}]要更改特定连接的配置，你必须在点的配置中指定连接对象，像这样：
js
data: [{
name: 'parent',
id: 'id-1
}, {
name: 'child',
parent: 'id-1',
link: {
type: 'curved',
lineWidth: 5
}
}]这个设置将对指向该节点的连接到起作用。
折叠功能
节点的默认点击行为是切换折叠/展开状态。点击任何具有子节点的节点时，所有子节点和链接的可见性将被隐藏。这有助于隐藏子树，使数据更易于阅读。再次点击同一个节点时，所有节点和链接将重新显示。你可以在任何演示中测试此功能，因为这是默认行为。
选项
关于树图选项的概述，请参阅 API.
Highcharts Dendrogram 树状图
树状图是一种用于聚类的专用树形图。树状图的关键部分在于分支长度具有意义，它们代表相似性或距离。两个分支越接近连接，表示它们的项目越相似。
在Highcharts中，我们通过为每个点（节点）赋予一个x值来体现相似性概念，该值会在x轴上进行绘制。这样我们就可以控制每个节点的x位置，从而用分支长度编码相似性。在树状图中，x轴默认是隐藏的，因此通常在树状图中我们希望将xAxis.visible设置为true。
在下面的示例中，我们建立了典型的分类树状图。x 轴以百万年前为单位，间接表示项目之间在时间上的相似性，即自上次共同祖先以来的时间。
一些值得注意的技术：
-
我们将所有节点的 marker.radius 设置为 0，有效隐藏了节点的标记，重点显示连接线所编码的关系。
-
我们使用两套不同的数据标签配置，每套都带有条件格式，用以区分叶子节点的标签和分支节点的标签。分支节点的标签仅用于显示分裂的时间。