历史版本9 :图表自定义标记点样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

 一些大屏或报表,需要特别突出其中一个标记点或系列或分类,那么则可以运用到图形或图片来替代其中一项,从而更能突现这份报表和大屏的强调的意义。以下为两种示例效果 1.根据系列设置常规标记点 2.根据值设置自定义标记点

  • 根据系列设置常规标记点效果图:

222

  •  根据值设置自定义标记点效果图:
    222

1.2 思路

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

2. 示例编辑

2.1 设计模板

新建普通报表,选择一片单元格,合并单元格为A1插入图表-折线图(新特性),类型选择折线图,如下图所示:

image.png

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

注2:根据系列设置常规标记点 百分比堆积面积图  帮助文档连接:https://help.fanruan.com/finereport/doc-view-1314.html

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 设置图表样式

选中图表,在右侧选择样式>系列,配色选择自定义>精确设置,修改颜色如下,标记点设置也如下:


在右侧选择样式>坐标轴>Y 轴,勾选自定义最大值,设为 30,如下图:

2.6 设置图表特效

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

image.png

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

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


2.7 效果预览

1)PC端预览:

点击分页预览,模板效果如下所示

  • 222

2)移动端预览:

移动端预览:支持移动端预览,效果图如下:

image.png


3 .模板下载编辑

已完成模板:

%FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc/Advanced/Chart/LineChart/标记点自定义折线图.cpt

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