历史版本19 :变化瀑布图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

为了更加凸显图表的数据,往往需要给不同的柱形赋予不同的颜色。如财务报表往往 收入是正值为绿色,付出是负值为红色。如下图所示:

变化瀑布图效果图.GIF

1.2 实现思路

通过特效>条件显示来设置不同分类的颜色,及不同系列的透明度等等。

2. 示例编辑

2.1 设计模板

新建普通报表,选中一片单元格,合并为A1单元格,选中A1->单元格元素->插入图表->柱形图->堆积柱形图,如下图所示:

image.png

2.2 新建数据

新建内置数据集-瀑布图数据,如下图所示:

image.png

2.3 设置图表数据

选中图表,在右侧选择数据,绑定数据来源,分类选择"项目",字段名选择 “辅助列”,“支出/收支绝对值”,如下图所示设置:
image.png

2.4 设置图表样式

选中图表,在右侧选择样式>标签,勾选使用标签,内容只勾选,位置选择外侧,如下所示:
image.png

在右侧选择样式>系列,配色方案 选择为 新特性,如下图所示:

image.png

2.5 设置图表特效

选中图表,点击特效条件显示,添加三个条件如下所示:

image.png

a)条件属性1

点击属性,配色,纯色,设置为绿色,选择条件,分类序号为1,6,7,如下图 给分类序号 1、6、7  (收入)修改配色为绿色:

image.png

b)条件属性2

点击属性,配色,纯色,设置为红色,选择条件,分类序号为2,3,4,5,8,9,如下图 给分类序号 2,3,4,5,8,9  (支出)修改配色为红色:

image.png

c)条件属性3

点击属性,选择标签,全不勾选,选择配色,选择为透明,边框格式,选择为无,选择条件为系列序号=1,如下图所示:

image.png

注:条件属性设置的顺序不能相反,否则有时会不显示。

image.png

2.6 效果预览

1)PC端

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

1591841735330162.gif

2)移动端

BC1D7EEC-692A-4E9E-8398-9C278944647E.GIF

3.模板下载编辑

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

点击下载模板:变化瀑布图.cpt