图表自定义系列属性

  • 文档创建者:Holly
  • 编辑次数:18次
  • 最近更新:Leo.Tsai 于 2020-06-23
  • 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

    附件列表


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