Previous topicNext topic
WebBuilderX > 子页面组件元素 > 图表类元素 >
树图

树图主要用来可视化树形数据结构,是一种特殊的层次类型,具有唯一的根节点。

树图非常适合展示各种分组数据,包括组织结构、思维导图等等。为了更直观的体现树图效果,我们在SQL统计里加上这样一个统计项目:

这是一种很常见的分组统计,如要使用树图展示这种数据,可以将它先作为树图的数据来源:

然后在数据系列中指定初始展开层级为1(根节点为0,依次类推),根节点名称设为“开始”(未设置时默认为“根节点”),并将节点列设为“产品名称、客户名称和销售数量”:

点击“保存”并生成代码,一个树图就生成了:

很显然,这种显示效果是有问题的,因为节点文本把节点图标覆盖了,看起来有点不太清晰。可点击“节点文字标签”旁边的设置按钮,重新设定标签位置为“top”:

图表显示效果如下图:

其中,根节点“开始”所在图标为空心的,表示这个根节点已经展开;而右边的其他节点图标为实心的,表明它们还有下级节点。将鼠标在需要的节点上单击,将展开下级节点;再次单击将收缩下级节点:

很显然,在展开的第3级节点中,其节点图标还是实心的,表示它们还存在下级节点。单击某个客户名称节点,又将显示其对应的销量数据:

如果你希望一次性展开全部节点,只要将初始展开层级设为-1即可。