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

目录:

1. 概述编辑

1.1 应用场景

进行指标的可视化时,有时不仅想看出这个指标的整体走势,可能也很关注某几个特定的数据点,比如最大值、最小值等值,相较于数字图形是最直观醒目的,因此“帆软软件”提供了 根据值设置自定义标记点的功能。下方展示为用图形替代折线图极值的效果:

C9241A13-8D2E-4B08-A3A9-72266ADA84F4.GIF

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

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

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

image.png

2.6 设置图表特效

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

image.png

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

image.png

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

image.png


2.7 效果预览

1)PC端预览

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

C9241A13-8D2E-4B08-A3A9-72266ADA84F4.GIF

2)移动端预览

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

79377466-905C-4FA5-870B-76893132966D.GIF


3 .模板下载编辑

已完成模板:

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

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