树形结构图

1.1 版本

注：该插件不支持移动端和 IE浏览器。

1.2 应用场景

现在提供树形结构图插件，使用树状结构显示数据上下层关系，效果如下图所示：

1.3 功能介绍

• 用户通过指定数据的 id 以及上级 id，来生成对应的树形结构，需要注意的是，本插件只能实现单一根节点的树形结构。

• 配置选项：面包屑导航，缩放功能，以及个性化的配色配置。

2.1 插件安装

点击下载插件：树形结构图插件

设计器插件安装方法参照：设计器插件管理

服务器安装插件方法参照：服务器插件管理

2.2 操作方法

打开设计器，点击图表，选择树形结构图插件，拖拽至相应的 frm 报表。

2.3 属性设置

2.3.1 数据

注：暂不支持单元格数据。

1）数据集数据

2.3.2 样式

1）基本

此处可设置标题及颜色、标题背景、是否开启缩放、是否显示导航。

2）样式

此处可设置名称文字颜色、背景颜色、内容文字颜色、图标颜色、边框、连线、选中颜色。

3.1 数据准备

新建如下图所示内置数据集，重命名为公司组织架构。

3.2 报表设计

1）新建决策报表，修改body组件布局方式为绝对布局，将树形结构图拖拽到报表设计主体中，调整树形结构图的框体大小。

2）如下图绑定好树形结构图的数据信息。

3）基本

可设置标题及颜色、标题背景、是否开启缩放、是否显示导航。

新增功能：

• 内容行数限制：用来解决描述内容过长或者过短不足一行的问题

• 单行：描述内容单行显示，此时节点高度设置无效

• 双行：描述内容双行显示，此时节点高度设置无效

• 换行符：描述内容使用\n进行主动换行，此时节点高度设置有效

（备注：保留单行、双行是为了兼容之前的逻辑，同时简化一般用户的设置）


• 节点展示宽度、高度：没有上限的限制，用户请根据自身需求设置合适的尺寸

• 宽度：>0 有效，<=0 则是插件内置的默认值

• 高度：>0 有效，<=0 则是插件内置的默认值

• 需要“内容行数设置”为“换行符”才能生效

• 默认展示层级：设置最初进入页面时展示的层级，

• > 0 有效，<=0 则是插件内置的默认值，即展示全部层级

• 纵向排列起始层级：用来解决从第三层开始，节点多导致显示效果不好的问题

• >= 3 有效，>=1 且 < 3 会被认为是3，其余值无效

4）样式

此处可根据需要选择，此处可按照默认选项。

点击下载模板：树形结构图插件.frm