框架图

  • 文档创建者:Holly
  • 编辑次数:16次
  • 最近更新:Leo.Tsai 于 2020-04-30
  • 1. 概述

    1.1 应用场景

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

    1.2 图表特点

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

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

    2. 属性介绍

    2.1 类型

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

    1588068366964744.png

    2.1.1 纵向框架图

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

    1588212626958298.png

    2.1.2 横向框架图

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

    1588212674926241.png

    2.1.3 发散框架图

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

    1588212717850561.png

    2.2 数据

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

    2.3 样式

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

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

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

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

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

    1588217168202510.png

    2.4 特效

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

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

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

    Snag_7b488.png

    3.1.2 组件设计

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

    1588212826438193.png

    3.1.3 数据绑定

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

    1588217226335084.png

    3.1.4 样式设计

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

    1588217264478803.png

    3.2 效果预览

    1)PC 端

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

    1588212873730743.png

    2)移动端

    1588213473683164.jpg

    4. 模板下载

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

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

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!