反馈已提交

网络繁忙

图表自定义多个坐标轴

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

    1.1 版本

    报表服务器版本
    11.0

    1.2 问题描述

    用户遇到如下问题:

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

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

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

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

    Snag_5d848f14.png

    1.3 解决思路

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

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

    Snag_5d1667ec.png

    2. 示例

    2.1 准备数据

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

    Snag_5d950689.png

    2.2 设计报表

    2.2.1 设置纸张大小

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

    2.2.2 插入图表

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

    Snag_5d96fc00.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_5d98d1ba.png

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

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

    Snag_5ce5c57b.png

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

    1632711317445459.png

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

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

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

    Snag_5da23181.png

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

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

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

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

    Snag_5dacc91d.png

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

    Snag_5db016f0.png

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

    Snag_5db209b8.png

    2.4 效果预览

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

    Snag_5d0b2d0b.png

    App 端和 HTML5 端均支持。

    3. 模板下载

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

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

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持