提示点获取数据集数据

1.1 版本

1.2 预期效果

在制作图表时，用户希望提示的内容可以获取数据集中的数据，且附有上升或下降的三角提示，预期效果如下图所示：

1.3 实现思路

若只是单纯的要显示数据集中的字段，某些图表可以直接使用 富文本 添加。但是富文本编辑器中，不支持再使用公式或者代码对内容的样式做一些自定义，所以只能通过「自定义」代码实现。在代码中调用公式去获取数据集中的字段，再自定义三角标样式。

如下图所示：

2.1 准备数据

点击设计器左上角「文件>新建普通报表」，选择模板主题为「清爽科技」。

新建内置数据集，名字修改为「ds1」，表设计如下图所示：

注：「较昨日」字段中正数表示上升，负数表示下降。

2.2 设计报表

2.2.1 插入图表

先选中一片单元格区域，点击上方工具栏「合并单元格」按钮，再点击「插入图表」按钮，选择「柱形图」。如下图所示：

2.2.2 绑定数据

选中图表，点击右侧属性面板「单元格元素>数据」，绑定数据集数据，分类选择「区间」，系列名使用字段名，字段名选择「今日」。如下图所示：

2.2.3 设置图表样式

1）设置标题

选中图表，选择「单元格元素>样式>标题」，输入文本「自定义提示内容」，位置选择「靠左」。如下图所示：

2）设置图例

因为只有一个系列，我们可以取消勾选图例可见。

3）设置提示

选中图表，选择「单元格元素>样式>提示」，内容选择「自定义」，输入代码如下：

function(){
var per=(FR.remoteEvaluate("value('ds1',3,1,'"+this.category+"')")*100).toFixed(0);
//获取数据集 ds1 内的第三列，且与该列对应的第一列的值是 this.category
return "区间： "+this.category+"<br>客户数： "+this.value+"家 &nbsp&nbsp 较昨日 "+
(per<0?"<font color='#ea4431'>▼</font>&nbsp":"<font color='#16c153'>▲</font>&nbsp")+Math.abs(per)+"%";
//per小于0时显示红色倒三角图标，per大于0时显示绿色正三角图标，并对per取绝对值
}

注：FR.remoteEvaluate 用于调用 FR 公式 value 函数，去获取数据集的值。

输入代码后，需选中「使用html解析文本内容」。如下图所示：

2.3 脚本调用公式限制

代码中使用的 FR.remoteEvaluate 脚本调用存在限制，需要点击设计器菜单栏的「服务器>报表平台管理」进入数据决策系统，在「管理系统>安全管理>安全防护」中关闭 脚本调用公式限制 。如下图所示：

若开启，预览模板会出现错误数据，右侧会弹出提示。如下图所示：

2.4 效果预览

2.4.1 PC 端

保存模板，点击「分页预览」，其效果如 1.2 预期效果所示。

2.4.2 移动端

App 端和 HTML5 端均支持，效果如下图所示：

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\数据点提示自定义字段内容.cpt

点击下载模板：数据点提示自定义字段内容.cpt