纵向框架图

1.1 版本

1.2 应用场景

框架图体现了各个节点之间的上下级关系，用来表示组织层级关系，同时还能展示每个节点的的值。

1.3 图表特点

优点：简单直观，很容易判断上下级之间的关系。

缺点：不适合较大数据集的展现。

2.1 类型

用单元格元素或悬浮元素插入框架图后，可在右边属性面板的类型设置项下，自由选择3种子类型。

以纵向框架图为例，如下图所示：

2.2 数据

框架图数据绑定的详细介绍可以参见文档：图表数据。

框架图数据中，需要包含父节点ID、节点ID、节点名称、值。

• 父节点ID和节点ID不支持文本数据，会无法判断层级

• 数据中只能有一个最父节点

具体格式如下图所示：

2.3 样式

框架图样式设计的详细介绍可以参见文档：图表样式。

框架图的样式>系列部分设置项跟基础样式有所不同，单独介绍：

• 配色方案：系统自带从默认到新特性一共12种选择，还可以进行自定义配色。

• 连线：包括颜色、宽度、不透明度均可以自行选择设计。

• 节点：包括节点半径、边框宽度、边框颜色、不透明度、图片填充。

2.4 特效

框架图特效设置的详细介绍可以参见文档：图表特效。

3.1 报表设计

3.1.1 数据准备

点击设计器左上角「文件>新建普通报表」，新建内置数据集 File1，记录各部门层级关系和年假天数，如下图所示：

3.1.2 插入图表

合并一片单元格区域，选中单元格后点击上方工具栏插入图表按钮，插入一个纵向框架图，如下图所示：

3.1.3 数据绑定

选择「数据」，绑定图表数据如下图所示：

3.2 框架图设计

选中图表，点击右侧属性面板「单元格元素」，可设置图表的各个属性：类型、数据、样式、特效。

3.2.1 设置样式

单元格元素修改标题文本，标签勾选使用标签>勾选节点名称，其余设置成默认即可，也可以根据实际业务需求进行设置，如下图所示：

3.3 效果预览

3.3.1 PC 端

保存报表，点击「分页预览」，效果如下图所示：

3.3.2 移动端

App 和 HTML5 端均支持，效果如下图所示：

点击下载模板：纵向框架图.cpt