历史版本6 :渐变柱形图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

图表渐变效果千呼万唤始出来,2020-07-08 及之后版本的 JAR 包新增渐变色设置入口,用户可以设置图表分类或系列对应图形颜色渐变。效果如下图所示:

  • 全柱形渐变效果:

Snag_518029f3.png

  • 单柱渐变效果:

Snag_51b5e988.png

  • 多系列渐变柱形图

Snag_393286b1.png

1.2 功能入口

图表属性面板样式>系列>颜色下新增渐变风格设置项,如下图所示:

Snag_51864eb4.png

  • 自动:根据配色方案的系列颜色自动渐变。

  • 自定义:用户可以点击左右两侧的按钮,自定义渐变左区间和右区间的颜色。

  • 关闭:关闭渐变风格,则图形颜色完全根据配色方案的颜色显示。

2. 全柱渐变柱形图编辑

2.1 准备数据

新建数据查询数据集 ds1,SQL 语句为:SELECT * FROM 销量

Snag_51924331.png

2.2 插入图表

合并一片区域单元格,插入柱形图,如下图所示:

1594260739989796.png

2.3 绑定数据

绑定柱形图数据,如下图所示:

Snag_5196da3d.png

2.4 设置标题

属性面板选择样式>标题,修改标题文本、位置和字符样式,如下图所示:

Snag_519aac63.png

2.5 设置渐变

属性面板选择样式>系列,渐变风格点击自定义,采用默认的渐变风格,如下图所示:

Snag_51864eb4.png

2.6 效果预览

1)PC 端

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

Snag_518029f3.png

2)移动端

1594261571801145.jpg

3. 单柱渐变柱形图编辑

准备数据、插入图表、绑定数据同上面全柱渐变柱形图的步骤。

2.1 设置标题

属性面板选择样式>标题,修改标题文本、位置和字符样式,如下图所示:

Snag_51b79600.png

2.2 设置渐变

1)设置第一个柱形的渐变色,属性面板选择特效>条件显示,添加一个配色类型的条件属性,自定义渐变色,普通条件为分类序号等于1,如下图所示:

Snag_51baac77.png

2)设置第二个柱形的渐变色,属性面板选择特效>条件显示,添加一个配色类型的条件属性,自定义渐变色,普通条件为分类序号等于2,如下图所示:

Snag_51bf2fcd.png

2.3 效果预览

1)PC 端

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

Snag_51b5e988.png

2)移动端

1594263716785593.jpg

4. 多系列渐变柱形图编辑

4.1 准备数据

新建数据查询数据集 ds1,SQL 语句为:SELECT * FROM 销量

Snag_51924331.png

4.2 插入图表

合并一片区域单元格,插入柱形图,如下图所示:

1594260739989796.png

4.3 绑定数据

绑定柱形图数据,如下图所示:

Snag_3936843d.png

4.4 设置标题

属性面板选择样式>标题,修改标题文本、位置和字符样式,如下图所示:

Snag_3938c014.png

4.5 设置渐变

1)设置第一个系列的渐变色,属性面板选择特效>条件显示,添加一个配色类型的条件属性,自定义渐变色,普通条件为系列序号等于1,如下图所示:

Snag_393bca37.png

2)设置第二个系列的渐变色,属性面板选择特效>条件显示,添加一个配色类型的条件属性,自定义渐变色,普通条件为系列序号等于2,如下图所示:

Snag_393e8b1c.png

4.6 效果预览

1)PC 端

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

Snag_393286b1.png

2)移动端

同时支持 App 端和 H5 端预览,效果如下图所示:

1598253503438987.jpg

5. 模板下载编辑

5.1 全柱渐变柱形图

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

点击下载模板:渐变柱形图.cpt

5.2 单柱渐变柱形图

已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\单柱渐变柱形图.cpt

点击下载模板:单柱渐变柱形图.cpt

5.3 多系列渐变柱形图

已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\多系列渐变柱形图.cpt

点击下载模板:多系列渐变柱形图.cpt