瀑布图-图表自定义系列属性

刺骨的言语ヽ痛彻心扉 2022-11-26 14:58 119阅读 0赞

## 1. 概述 ##

### 1.1 应用场景 ###

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

![变化瀑布图效果图.GIF][.GIF]

### 1.2 实现思路 ###

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

## 2. 示例 ##

### 2.1 设计模板 ###

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

![image.png][]

### 2.2 新建数据 ###

新建内置数据集-瀑布图数据，如下图所示：

![image.png][image.png 1]

### 2.3 设置图表数据 ###

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

### 2.4 设置图表样式 ###

选中图表，在右侧选择样式>标签，勾选使用标签，内容只勾选值，位置选择外侧，如下所示：  
![image.png][image.png 3]

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

![image.png][image.png 4]

### 2.5 设置图表特效 ###

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

![image.png][image.png 5]

a)条件属性1

点击属性，配色，设置为绿色，选择条件，分类序号为1，6，7，如下图 给分类序号 1、6、7  （收入）修改配色为绿色：

![image.png][image.png 6]

b)条件属性2

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

![image.png][image.png 7]

c)条件属性3

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

![image.png][image.png 8]

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

![image.png][image.png 9]

### 2.6 效果预览 ###

1）PC端

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

![1591841735330162.gif][.GIF]

2）移动端

![BC1D7EEC-692A-4E9E-8398-9C278944647E.GIF][]

## 3.模板下载 ##

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

点击下载模板：[变化瀑布图.cpt][.cpt]

[.GIF]: /images/20221124/e1547cd3031e47918ccc3f314da8d160.png
[image.png]: /images/20221124/9fc6286d95c741bda4d4bcb3101b2cee.png
[image.png 1]: /images/20221124/24aa44937f6341b2adbcc2bfd716fa47.png
[image.png 2]: /images/20221124/db21e124080c4092a87614d941dd4f87.png
[image.png 3]: /images/20221124/dbb761c986c34291a554c74c57d9512c.png
[image.png 4]: /images/20221124/0e6b01cb03ad467fa21fee3ed900e21a.png
[image.png 5]: /images/20221124/6887343facbd42be98f4f21dfb9147b5.png
[image.png 6]: /images/20221124/e0672dcd7c9f4a37b04748369827d218.png
[image.png 7]: /images/20221124/cda5834f23b04033a43632ca7e3c7fe4.png
[image.png 8]: /images/20221124/c502935c12494d698ca6b50d142aadbe.png
[image.png 9]: /images/20221124/701407567b25420aaa4b00f21973be6b.png
[BC1D7EEC-692A-4E9E-8398-9C278944647E.GIF]: /images/20221124/fd5c1d4605994f28834c8437daa02f44.png
[.cpt]: https://help.finereport.com/doc-download-/uploads/file/20200611/%E5%8F%98%E5%8C%96%E7%80%91%E5%B8%83%E5%9B%BE.cpt