提示点获取数据集数据

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.2.4 甘特图实现提示点获取数据集数据

在甘特图中与柱状图和折线图中的内置参数不一致。甘特图中的内置参数分别是：

提示:想要通过自定义js代码的方式获取到数据集中的数据，需要先确定数据集中是否有一个字段是唯一值，可以通过该唯一值直接确定数据，如果没有可以尝试将多个字段拼接到一起作为唯一值

表结构示例：

以下是代码示例：

function(){ 
    // 补零函数（保留原有，因非本次新增且为基础工具）
    function addZero(num) {
        return num < 10 ? '0' + num : num;
    }

    // 开始时间
    var timestamp = this.startTime;
    var date = new Date(timestamp);
    var year = date.getFullYear();
    var month = addZero(date.getMonth() + 1);
    var day = addZero(date.getDate());
    var hours = addZero(date.getHours());
    var minutes = addZero(date.getMinutes());
    var seconds = addZero(date.getSeconds());
    //（因为数据集中的开始时间与结束时间的时间格式为YYYY-MM-DD所以需要再次拼接）
    var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

    // 结束时间
    var timestamp2 = this.finishTime;
    var date2 = new Date(timestamp2);
    var year2 = date2.getFullYear();
    var month2 = addZero(date2.getMonth() + 1);
    var day2 = addZero(date2.getDate());
    var hours2 = addZero(date2.getHours());
    var minutes2 = addZero(date2.getMinutes());
    var seconds2 = addZero(date2.getSeconds());
    var formattedDate2 = year2 + '-' + month2 + '-' + day2 + ' ' + hours2 + ':' + minutes2 + ':' + seconds2;

    // 计算开始时间与结束时间的时间差，因内置的持续时间的格式是时间戳，需要再次进行转换
    var durationText = "";
    var timeDiffMs = timestamp2 - timestamp;
    
    if (timeDiffMs < 0) {
        durationText = '时间异常';
    } else {
        var totalSeconds = Math.floor(timeDiffMs / 1000);
        var days = Math.floor(totalSeconds / (3600 * 24));
        var hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
        var minutes = Math.floor((totalSeconds % 3600) / 60);
        var seconds = totalSeconds % 60;

        var parts = [];
        if (days > 0) parts.push(days + '天');
        if (hours > 0) parts.push(hours + '小时');
        if (minutes > 0) parts.push(minutes + '分钟');
        if (seconds > 0 || parts.length === 0) parts.push(seconds + '秒');
        
        durationText = parts.join('');
    }
    // ---【结束：时间差计算逻辑】---

    //获取数据中的数据 
    var objectName = this.processes[this.processes.length - 1].name;
    //将项目名称与开始时间和结束时间拼接作为唯一标识进行查询数据
    var param = objectName + '-' + formattedDate+'-'+formattedDate2;
    // ds1为你的数据集名称,6是你想获取的数据集字段在数据集中的第几列，7是你的唯一标识字段在数据集中的第几列
    var per = (FR.remoteEvaluate("value('ds1',6,7,'"+param+"')"));

    // 返回结果（包含运行时长）
    return "设备:" + this.processes[this.processes.length - 1].name 
         + "<br>状态:" + this.seriesName 
         + "<br>开始时间:" + formattedDate 
         + "<br>结束时间:" + formattedDate2 
         + "<br>运行时长:" + durationText 
         + "<br>变更原因:" + per;
}

FR.remoteEvaluate 获取不到数据？

• 检查 “数据集名称” 是否写错（区分大小写）。

• 检查 “列号” 是否数错（从 0 开始！）。

• 检查 “唯一标识” 是否真的唯一（比如拼接的字段有没有重复）。

• 检查 “唯一标识” 的格式和数据集里的是否一致（比如时间格式有没有多空格）。

2.3 脚本调用公式限制

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

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

2.4 效果预览

2.4.1 PC 端

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

2.4.2 移动端

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

2.5 FVS可视化看板示例

在 FVS 中引用表格数据集数据时，代码中获取数据集的接口写法需要改变，使用 duchamp.remoteEvaluate 。

完整代码示例如下：

function(){  
var per = (duchamp.remoteEvaluate("value('ds1',3,1,'"+this.category+"')")*100).toFixed(0);
return "区间： "+this.category+"<br>客户数： "+this.value+"家 &nbsp&nbsp 较昨日 "+
(per<0?"<font color='#ea4431'>▼</font>&nbsp":"<font color='#16c153'>▲</font>&nbsp")+Math.abs(per)+"%";
}

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

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