历史版本12 :框架图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

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

1.2 图表特点

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

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

2. 属性介绍编辑

2.1 类型

以单元格元素或悬浮元素插入条形图后,可在右边属性面板的类型设置项下,自由选择3种子类型,如下图所示:

1588068366964744.png

2.1.1 纵向框架图

自上向下逐级展示数据,节点数据直观可见。

1588069262335377.png

2.1.2 横向框架图

自左向右逐级展示数据,数据直观可见。

1588069432151473.png

2.1.3 发散框架图

动态展示数据,由一个中心点向四周展示数据,效果比较酷炫。

1588069542381596.png

2.2 数据

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

2.3 样式

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

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

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

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

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

1588143627611121.png

2.4 特效

词云特效设置的详细介绍可以参见文档:图表特效

3. 示例编辑

3.1 报表设计

3.1.1 数据准备

内置数据集 File1,分别记录各部门层级关系和年假天数,如下图所示:

image.png

插入行,新增数据,结果如图所示:

image.png

3.1.2 组件设计

将3个框架图拖拽到 body 组件中,分别设置成3个不同的子类型,调整它们之间的位置关系,如下图所示:

image.png

3.1.3 数据绑定

三种类型的框架图的样式设置方法相同,本节以纵向框架图为例,如下图所示:

1588150802696505.png

3.1.4 样式设计

选择图表属性表-样式>系列,自定义系列配色和连线的颜色,正常设置成默认即可,也可以根据实际业务需求进行设置,如下图所示:

1588151397926318.png

3.2 效果预览

1)PC 端

保存报表,点击表单预览,效果如下图所示:

image.png

2)移动端

1588154436555979.jpg

4. 模板下载编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\框架图.frm

点击下载模板:框架图.frm