图表自定义标记点样式

  • 文档创建者:Holly
  • 编辑次数:12次
  • 最近更新:Leo.Tsai 于 2020-06-23
  • 1. 概述

    1.1 应用场景

    图表可自定义标记点的点样式,上传图片替代原先的圆点效果,如下图折线图示例,将标记点的最大值和最小值替换为图片。

    1592456878258309.gif

    1.2 实现思路

    新建普通报表,插入对应图表,制定内置数据集temperature,并将数据绑定图表,图表点击特效设置->条件显示,添加条件属性,并配置对应条件的自定义点样式

    2. 示例

    2.1 设计模板

    新建普通报表,选择一片区域单元格,合并单元格为A1,插入折线图,如下图所示:

    1592457282287340.png

    注1:根据系列设置常规标记点具体方法请看下面帮助链接,不再赘述,这里详细讲解根据值设置自定义标记点的方法。

    注2:根据系列设置常规标记点参见文档:百分比堆积面积图

    2.2 准备数据

    新建普通报表,添加内置数据集 temperature,如下图所示:
    222

    2.3 设置最大最小值

    在 J1 和 J2 单元格分别输入公式max(temperature.select(XiaMen))min(temperature.select(KunMing)),分别代表系列 1 的最大值和系列 2 的最小值,并将 J 列隐藏。

    2.4 设置图表数据

    选中图表,在右侧选择数据,选择对应数据源,绑定对应数据,如下图所示:
    image.png

    2.5 设置图表样式

    1)选中图表,在右侧选择样式>系列,配色选择自定义>精确设置,自定义组合色,标记点使用常规圆点,如下图所示:

    image.png
    2)在右侧选择样式>坐标轴>Y 轴,勾选自定义最大值,设为 30,如下图所示:

    image.png

    2.6 设置图表特效

    1)选中图表,在右侧选择特效>条件显示,点击添加条件,添加条件属性,如下图所示,给 J1 和 J2 的值添加添加自定义标记点:

    image.png

    2)条件属性1,设置点样式>自定义>雨天图,设置条件为值=J2,即kunming的最小值,如下图所示:

    image.png

    3)条件属性2,设置点样式>自定义>晴天图,设置条件为值=J1,即xiamen的最大值,如下图所示:

    image.png

    2.7 效果预览

    1)PC 端

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

    1592456878258309.gif

    2)移动端

    1592457091933050.gif

    3. 模板下载

    已完成模板可参见:%FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc/Advanced/Chart/LineChart/标记点自定义折线图.cpt

    点击下载模板:标记点自定义折线图.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!