反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

图表自定义多个坐标轴

  • 文档创建者:文档助手1
  • 历史版本:32
  • 最近更新:yzm255836 于 2021-12-17
  • 1. 概述

    1.1 问题描述

    用户遇到如下问题:

    • 希望自己的图表上有一个横轴两个纵轴(y 轴)。

    • y 轴设置左右两个维度,比如一个按照数字,一个按照百分比。

    • 当一个图表几个系列的数据单位均不相同时,希望均能显示不同坐标轴。

    可通过添加「堆积和坐标轴」以及设置坐标轴颜色来区分系列,如下图所示:

    Snag_5d848f14.png

    1.2 解决思路

    在自定义柱形图属性面板的「样式>坐标轴」下可以选择添加 X 轴或 Y 轴,再在「样式>系列>堆积和坐标轴」处配置坐标轴与系列的对应关系。

    注:并不是所有图表都支持「堆积和坐标轴」,只有自定义的图表才可以,例如「自定义柱形图、自定义条形图、自定义折线图」等等。

    Snag_5d1667ec.png

    2. 示例

    2.1 准备数据

    点击设计器左上角「文件>新建普通报表」,新增内置数据集「Weather」,记录了月份、降雨量、海平面高度和温度之间的关系。如下图所示:

    Snag_5cc3b0c0.png

    2.2 设计报表

    2.2.1 设置纸张大小

    本例中包含 12 个分类,每个分类包含 3 个系列,为了图表展示时不被分页展示,需要在「模板>页面设置」中将纸张大小调大一些。如下图所示:

    Snag_5ccac30e.png

    2.2.2 插入图表

    合并一片单元格,插入「柱形图>自定义柱形图」,如下图所示:

    Snag_5ccf6cf6.png

    2.3 设计柱形图

    选中图表,点击右侧属性面板「单元格元素」,可设置图表的各个属性:类型、数据样式特效

    2.3.1 图表类型

    选中图表所在单元格,点击右侧「单元格元素>类型」可查看和选择图表类型。

    注:柱形图中只有「自定义柱形图」才有堆积坐标轴,其他三个柱形图无此设置项。

    Snag_5cd2e93c.png

    2.3.2 绑定数据

    绑定图表数据如下图所示:

    其中 Rainfall 为 系列1,Sea-LevelPressure 为 系列2,Temperature 为 系列3。

    Snag_5cd5d4ac.png

    2.3.3 设置样式

    1)设置图表标题为「多坐标轴自定义」,位置「靠左」。

    Snag_5cdb2aa3.png

    2)设置「样式>图例」位置「靠上>对齐」

    Snag_5cdce98a.png

    3)设置「样式>坐标轴」,再添加两个 Y 轴,分别是 Y轴2 和 Y轴3。

    Snag_5ce5c57b.png

    4)在坐标轴处添加 Y轴 后,再设置「样式>系列」,在堆积和坐标轴处添加两个「堆积和坐标轴」,双击名称将其重命名为「Y轴2」和「Y轴3」。如下图所示:

    Snag_5ce9f68b.png

    本例中 系列2 需对应 Y轴2,系列3 需对应 Y轴3,系列1 不做设置,默认对应 Y轴。 

    • Y轴2:设置条件为「系列序号 等于 '2'」时,使用 Y轴2 。

    注:配置中的「堆积」可用于条件中包含两个及以上的系列,在本例中无影响。

    Snag_5cef266c.png

    • Y轴3:设置条件为「系列序号 等于 '3'」时,使用 Y轴3 。

    Snag_5cf309b9.png


    5)上个步骤完成后,系列对应的坐标轴已经设置完成。但是因为每个 Y轴 数据不同,为了对比明显我们需要为每个 Y轴 自定义最大最小值;且为了区分各个坐标轴,我们需对每个 Y轴 字体颜色进行设置。

    • Y轴:需要将 轴标题 显示出来,并且将轴标题以及轴标签的颜色设置为与 系列1 相同的「蓝色」。具体设置如下图所示:

    注:Y轴 轴标签格式中的单位 mm 需手动输入,Y轴2、Y轴3 同理。

    Snag_5cfcc0d8.png

    • Y轴2:将轴标题以及轴标签的颜色设置为与 系列2 相同的「绿色」,并且将其位置设置为「右侧」。具体设置如下图所示:

    Snag_5d01a672.png

    • Y轴3:将轴标题以及轴标签的颜色设置为与 系列3 相同的「黄色」,并且将其位置设置为「右侧」。具体设置如下图所示:

    Snag_5d101797.png

    2.4 效果预览

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

    Snag_5d0b2d0b.png

    App 端和 HTML5 端均支持。

    3. 模板下载

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

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

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526