反馈已提交

网络繁忙

组成瀑布图

  • 文档创建者:Alicehyy
  • 历史版本:3
  • 最近更新:Catqiu 于 2023-03-24
  • 1. 概述

    1.1 应用场景

    组成瀑布图适合展示总分结构或序列变化。比如下图中我们可以清晰地看到各方面的支出情况,以及加起来的总支出,并可以看出其中伙食费和房租占比最高。

    Snag_28d2f540.png

    1.2 实现思路

    组成瀑布图是由「堆积柱形图」制作的,实现该图的几个要点如下:

    • 原始数据均为正数,若有负数参考文档:变化瀑布图 

    • 除了「最初数据」和「最终数据」的柱子,其他数据需要「占位」数据堆积显示,占位数据在图表中需隐藏。

    故首先需要使用公式处理数据,得出「占位」数据,图表则绑定单元格数据;再在图表中设置「特效>条件显示」隐藏占位数据。

    1.3 视频教程

    2. 示例

    2.1 准备数据

    点击设计器左上角「文件>新建普通报表」,新建内置数据集「本月支出明细」,数据如下图所示:

    Snag_28e31760.png

    2.2 设计表格

    2.2.1 设置表格样式

    设计表格样式如下图所示:

    Snag_28e410b5.png

    其中 A2、B2 单元格来自数据集,C2 单元格为使用公式得出的辅助数据。具体设置如下表:

    单元格
    设置说明
    A2、B2直接将数据列拖入单元格即可纵向扩展的表格数据
    C2

    插入公式

    =IF(&A2 = 1, 0, B2[A2:-1]+ C2[A2:-1])

    占位数据第一个值应该为 0 ,后面的值则应该为 B2 单元格前面所有值累计的结果,所以需要使用层次坐标实现

    &A2 表示 A2 单元格扩展后的位置序号,B2[A2:-1] 表示 A2 单元格扩展出来的上一格中对应 B2 的值

    设置完成后,先预览一下报表,保存报表点击「分页预览」,效果如下图所示:

    Snag_28e96c1b.png

    2.2.2 设置条件属性

    从上述预览效果可以看到其中「总支出」的占位数据并不为 0,但是我们需要的是「最初数据」和「最终数据」的占位数据均为 0 ,所以这里还需要对 C2 单元格设置一个条件属性。

    选中 C2 单元格,点击右侧「条件属性」,添加一个条件属性,新值为整型 0,条件为公式条件 A2="总支出" ,最后点击「增加」按钮。

    Snag_28ee7a2c.png

    再次预览报表,「最终收入」的占位数据即为 0,效果如下图所示:

    Snag_28ef4944.png

    2.3 设置图表

    2.3.1 插入图表

    选中一片单元格区域,合并单元格后插入「堆积柱形图」。如下图所示:

    Snag_28f1176c.png

    2.3.2 绑定数据

    选中图表,点击「单元格元素>数据」,绑定单元格数据。

    • 分类名为公式 =A2 ,即 A2 单元格扩展出来的所有值

    • 系列 1 的系列名直接输入「占位」,值为公式 =C2 

    • 系列 2 的系列名直接输入「值」,值为公式 =B2 

    Snag_28f2b00d.png

    2.3.3 设置图表样式

    1)图表标题

    点击「样式>标题」,输入标题为「组成瀑布图」。

    Snag_28f3c277.png

    2)取消图例

    点击「样式>图例」,取消勾选「图例可见」。

    Snag_28264fcd.png

    3)设置图表标签

    点击「样式>标签」,勾选「标签可见」,内容显示「通用>值」即可,位置选择外侧,开启重叠调整。

    Snag_28292b8d.png

    4)设置条件显示

    点击「特效>条件显示」,添加一个条件属性,双击名称将其重命名为「占位数据配色透明」。如下图所示:

    Snag_28f77e95.png

    点击左侧编辑按钮进入配置界面,添加一个「配色」为透明的属性,条件为 系列序号等于字符串 1,即「占位」系列。如下图所示:

    Snag_28348c36.png

    2.4 隐藏表格

    完成所有设置后,选中表格所在行,鼠标右键单击行序号,将表格隐藏

    Snag_28f93936.png

    2.5 效果预览

    2.5.1 PC 端

    保存报表,点击「分页预览」,效果如 1.1 节应用场景所示。

    2.5.2 移动端

    App 端和 HTML5 端均支持,效果如下图所示:

    Snag_28fad32f.png

    3. 模板下载

    已完成模板参见:%FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc/Chart/ColumnChart/组成瀑布图.cpt

    点击下载模板:组成瀑布图.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持