1. 概述
1.1 版本
| 报表服务器版本 |
|---|
| 11.0 |
1.2 应用场景
框架图体现了各个节点之间的上下级关系，用来表示组织层级关系，同时还能展示每个节点的的值。
1.3 图表特点
优点：简单直观，很容易判断上下级之间的关系。
缺点：不适合较大数据集的展现。
2. 属性介绍
2.1 类型
以单元格元素或悬浮元素插入框架图后，可在右边属性面板的类型设置项下，自由选择3种子类型，如下图所示：
2.1.1 纵向框架图
自上向下逐级展示数据，节点数据直观可见。
2.1.2 横向框架图
自左向右逐级展示数据，数据直观可见。
2.1.3 发散框架图
动态展示数据，由一个中心点向四周展示数据，效果比较酷炫。
2.2 数据
框架图数据绑定的详细介绍可以参见文档：图表数据。
框架图数据中，需要包含父节点ID、节点ID、节点名称、值。
父节点ID和节点ID不支持文本数据，会无法判断层级
数据中只能有一个最父节点
具体格式如下图所示：
2.3 样式
框架图样式设计的详细介绍可以参见文档：图表样式。
框架图的样式>系列部分设置项跟基础样式有所不同，单独介绍：
配色方案：系统自带从默认到新特性一共12种选择，还可以进行自定义配色。
连线：包括颜色、宽度、不透明度均可以自行选择设计。
节点：包括节点半径、边框宽度、边框颜色、不透明度、图片填充。
2.4 特效
框架图特效设置的详细介绍可以参见文档：图表特效。
3. 示例
3.1 报表设计
3.1.1 数据准备
新建内置数据集 File1，记录各部门层级关系和年假天数，如下图所示：
3.1.2 组件设计
将 3 个框架图拖拽到 body 组件中，分别设置成3个不同的子类型，调整它们之间的位置关系，如下图所示：
3.1.3 数据绑定
三种类型的框架图的样式设置方法相同，本节以纵向框架图为例，如下图所示：
3.1.4 样式设计
图表属性面板选择样式>系列，自定义系列配色和连线的颜色，正常设置成默认即可，也可以根据实际业务需求进行设置，如下图所示：
3.2 效果预览
1）PC 端
保存报表，点击PC端预览，效果如下图所示：
2）移动端
4. 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\StructureFrame\框架图.frm
点击下载模板：框架图.frm
上一篇：多项目甘特图
