很多数据并不是“平铺”的而是天然带着一种古老而优雅的结构——树结构。组织架构、文件目录、家谱关系、产品分类、算法决策树本质上都是一棵树。人类理解这种结构其实很直觉从一个根开始向下分叉一层一层展开。于是就诞生了 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中树的构建示例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 选项链接与树状图系列不同节点之间的连接以链接的形式表示。这些链接是根据子项的选项生成的。链接的形状与组织结构图中的相同适用的选项也相同。要为所有链接应用通用选项可以像这样定义链接选项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}]}]要更改特定连接的配置你必须在点的配置中指定连接对象像这样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有效隐藏了节点的标记重点显示连接线所编码的关系。我们使用两套不同的数据标签配置每套都带有条件格式用以区分叶子节点的标签和分支节点的标签。分支节点的标签仅用于显示分裂的时间。更多演示系统发育树图 Phylogenetic Treegraph带有不同连接类型的树状图 Treegraph chart with different link types带有文本路径的数据标签的树状图 Treegraph chart with text path on dataLabels for links节点层级不同的树状图 Treegraph chart with different node level for nodes反转树状图 Inverted treegraph编程语言树 Programming language tree