历史版本19 :图表自定义多个坐标轴 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

1.1 应用场景

对于多个坐标轴的图表,支持自定义坐标轴的位置,如下图所示:
a.png

1.2 实现思路

在自定义柱形图属性面板的样式>坐标轴下可以选择添加 X 轴或 Y 轴。

实现思路.png

2. 示例编辑

2.1 准备数据

新建普通报表,添加内置数据集 Weather,分别记录月份和降雨量、海平面高度、温度之间的关系,如下图所示:

d.png

2.2 设计报表

1)以单元格图表为例,合并一片单元格,插入自定义柱形图,如下图所示:

报表设计1.png

2)选中图表,绑定图表数据,如下图所示:

报表设计数据.png

3)自定义的柱形图默认系列 2 和系列 3 会和系列 1 共用同一条 Y 轴,这里需要给系列 2 和系列 3 单独设置各自的 Y 轴,选择样式>系列>堆积和坐标轴,点击添加按钮,如下图所示:

报表设计3.png

4)这里有三个 Y 系列,所以再添加一个 Y轴3,选择样式>坐标轴,点击添加按钮,如下图所示:

j.png

5)再添加一个堆积和坐标轴 2,系列序号为 3,如下图所示:

Snag_1a7cdb4a.png

6)为了清楚区分系列,下面我们再分别对应系列颜色,设置,这里我们以 Y 轴为例设置样式>坐标轴>Y轴>格式,如下图所示:

设计报表6.png

7)这里需要将 Y 轴 3 的位置调整为右侧,样式>坐标轴>Y轴3>位置选择右侧,如下图所示:

位置.png

备注:后续添加的坐标轴默认都是在左侧显示。

8)另外,可以发现值轴默认的刻度值使得不同月份的对比不明显,这里我们选择样式>坐标轴>Y 轴 2>值定义,设置自定义最小值和最大值,如下图所示:
p.png

2.3 效果预览

1)PC 端

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

效果预览.png

2)移动端

移动端.png

3.模板下载编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\多坐标轴位置自定义柱形图.cpt

点击下载模板:多坐标轴位置自定义柱形图.cpt