仪表盘自定义标签目标值

1. 概述

10.0.16 版本之前的设计器中，百分比圆环仪表盘、百分比刻度槽仪表盘和试管型仪表盘的「值标签」不支持显示「目标值」，但可以通过自定义实现：

实现效果如下图所示：

2. 示例2.1 准备数据

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

2.2 插入图表

在表格中合并三块单元格区域，分别插入图表：百分比圆环仪表盘、百分比刻度槽型仪表盘、试管型仪表盘。如下图所示：

2.3 绑定数据

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

2.4 自定义标签

3 个图表自定义标签的方法一致，点击「样式>标签」，在「值标签」处选中「自定义」，输入 JavaScript 代码，并选中「使用 html 解析文本内容」。JavaScript 代码如下：

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

复制代码

注：this.value 代表实际值，this.target 代表目标值，但 this.target 非官方接口，慎用。

在 10.0.16 版本及之后的设计器中，目标值官方接口为 this.targetValue。

如下图所示：

2.5 效果预览2.5.1 PC 端

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

2.5.2 移动端

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