1. 概述
1.1 版本
报表服务器版本 |
---|
11.0 |
1.2 应用场景
全柱形渐变效果:
单柱渐变效果:
多系列渐变效果:
1.2 功能入口
图表属性面板样式>系列>颜色下新增渐变风格设置项,如下图所示:
自动:根据配色方案的系列颜色自动渐变。
自定义:用户可以点击左右两侧的按钮,自定义渐变左区间和右区间的颜色。
关闭:关闭渐变风格,则图形颜色完全根据配色方案的颜色显示。
2. 全柱渐变柱形图
2.1 准备数据
新建数据查询数据集 ds1,SQL 语句为:SELECT * FROM 销量
2.2 插入图表
合并一片区域单元格,插入柱形图,如下图所示:
2.3 绑定数据
绑定柱形图数据,如下图所示:
2.4 设置标题
属性面板选择样式>标题,修改标题文本、位置和字符样式,如下图所示:
2.5 设置渐变
属性面板选择样式>系列,渐变风格点击「自定义」,采用默认的渐变风格,如下图所示:
2.6 效果预览
2.6.1 PC 端
保存报表,点击「分页预览」,效果如下图所示:
2.6.2 移动端
3. 单柱渐变柱形图
准备数据、插入图表、绑定数据同上面全柱渐变柱形图的步骤。
3.1 设置标题
属性面板选择样式>标题,修改标题文本、位置和字符样式,如下图所示:
3.2 设置渐变
1)设置第一个柱形的渐变色,属性面板选择「特效>条件显示」,添加一个「配色」类型的条件属性,自定义渐变色,普通条件为「分类序号等于1」,如下图所示:
2)同理设置第二个柱形的渐变色,普通条件为「分类序号等于2」,如下图所示:
3.3 效果预览
3.3.1 PC 端
保存报表,点击「分页预览」,效果如下图所示:
3.3.2 移动端
4. 多系列渐变柱形图
4.1 准备数据
新建数据查询数据集 ds1,SQL 语句为:SELECT * FROM 销量
4.2 插入图表
合并一片区域单元格,插入柱形图,如下图所示:
4.3 绑定数据
绑定柱形图数据,如下图所示:
4.4 设置标题
属性面板选择样式>标题,修改标题文本、位置和字符样式,如下图所示:
4.5 设置渐变
1)设置第一个系列的渐变色,属性面板选择「特效>条件显示」,添加一个「配色」类型的条件属性,自定义渐变色,普通条件为「系列序号等于1」,如下图所示:
2)同理设置第二个系列的渐变色,普通条件为「系列序号等于2」,如下图所示:
4.6 效果预览
4.6.1 PC 端
保存报表,点击「分页预览」,效果如下图所示:
4.6.2 移动端
5. 模板下载
5.1 全柱渐变柱形图
已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\渐变柱形图.cpt
点击下载模板:渐变柱形图.cpt
5.2 单柱渐变柱形图
已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\单柱渐变柱形图.cpt
点击下载模板:单柱渐变柱形图.cpt
5.3 多系列渐变柱形图
已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\多系列渐变柱形图.cpt
点击下载模板:多系列渐变柱形图.cpt