为环形饼图/仪表盘图添加带%符号的数值标签

要在仪表盘代表当前数值的线段上方添加带%的文本，可按以下步骤修改配置：

步骤1：新增文本标记层 #

在配置的marks数组里，添加一个text类型的标记，放在仪表盘线段标记之后，确保文本显示在线段上方。

步骤2：添加文本配置代码 #

使用以下配置片段，实现文本的位置计算与格式设置：

{
  "type": "text",
  "from": {"data": "values"},
  "encode": {
    "enter": {
      "x": {
        "signal": "width/2 + (datum.radius - 15) * cos(scale('theta', datum.value) - PI/2)"
      },
      "y": {
        "signal": "height/2 + (datum.radius - 15) * sin(scale('theta', datum.value) - PI/2)"
      },
      "text": {
        "signal": "format(datum.value, '.1f') + '%'"
      },
      "align": {"value": "center"},
      "baseline": {"value": "middle"},
      "fill": {"value": "#333"},
      "fontSize": {"value": 12}
    }
  }
}

关键配置说明 #

• 位置偏移：通过三角函数结合仪表盘半径与角度刻度计算坐标，减去15让文本在线段上方偏移显示。
• 数值格式化：用format函数调整数值精度（.1f代表保留一位小数，可按需修改），拼接%符号。
• 对齐设置：align: center和baseline: middle确保文本在目标坐标上居中对齐。

将这段配置添加到原有的marks数组中，即可实现示例图中的效果。

内容的提问来源于stack exchange，提问作者Timen Groenenberg