仪表盘自定义标签

1.1 应用场景

仪表盘经常用于大屏场景展示，但由于版本的局限性，标签的部分功能可能无法满足客户需求。

比如客户想直接在仪表盘标签中将目标值展示出来，以便了解某个或某些指标实际值与目标值的差距。效果如下图所示：

1.2 实现思路

仪表盘支持自定义值标签功能，可以通过 JavaScript 代码来实现上述效果。

2.1 准备数据

新建普通报表，新建内置数据集，如下图所示：

2.2 插入图表

插入 3 个悬浮元素图表，分别是百分比环形仪表盘、百分比刻度槽型仪表盘、试管型仪表盘，调整下它们之间的布局，如下图所示：

2.3 绑定数据

3 个图表的数据绑定是一致的，如下图所示：

2.4 自定义标签

3 个图表自定义标签的方法一致，值标签选中「自定义」，填写 JavaScript 代码，并点亮「使用html解析文本内容」，如下图所示：

JavaScript 代码如下：

function() {
    return this.category + "<br>实际值:" + this.value + "<br>目标值:" + this.target; //this.value 代表实际值，this.target 代表目标值
}

2.5 效果预览

保存报表，点击分页预览，效果如下图所示：

注：不支持移动端预览。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\仪表盘自定义标签.cpt

点击下载模板：仪表盘自定义标签.cpt