很多数据并不是'平铺'的,而是天然带着一种古老而优雅的结构——树结构。
组织架构、文件目录、家谱关系、产品分类、算法决策树,本质上都是一棵树。
人类理解这种结构其实很直觉:从一个根开始,向下分叉,一层一层展开。于是就诞生了 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:}]}]


