Vega Lite饼图数值标签位置异常问题求助

你的代码里有几个关键问题导致标签位置异常，调整后就能让标签正确对齐：

核心问题与修正点 #

• 文本类型错误：你把category字段的类型设为quantitative，但它是分类类型（nominal），这会导致文本渲染逻辑出错
• Theta聚合缺失：饼图的arc层默认会对value做sum聚合，但文本层没有指定，导致位置计算偏差
• 文本对齐与角度未配置：缺少对齐方式和角度适配，标签会出现偏移或倒置

修正后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": "b", "value": 4},
      {"category": "a", "value": 6},
      {"category": "f", "value": 10},
      {"category": "e", "value": 3},
      {"category": "c", "value": 7},
      {"category": "d", "value": 8}
    ]
  },
  "layer": [
    {
      "params": [
        {
          "name": "highlight",
          "select": {
            "type": "point",
            "on": "mouseover"
          }
        }
      ],
      "mark": {
        "type": "arc",
        "stroke": "white",
        "cursor": "pointer"
      },
      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "tooltip": [
          {
            "field": "value",
            "title": "Participation %"
          }
        ],
        "color": {
          "field": "category",
          "type": "nominal",
          "scale": {
            "range": [
              "orange",
              "brown",
              "red",
              "gray",
              "lightgray",
              "azure"
            ]
          },
          "sort": {
            "field": "value",
            "order": "descending"
          }
        },
        "order": {
          "field": "value",
          "type": "quantitative",
          "sort": "descending"
        },
        "fillOpacity": {
          "condition": [
            {
              "param": "highlight",
              "value": 1
            }
          ],
          "value": 0.3
        },
        "strokeWidth": {
          "condition": [
            {
              "param": "highlight",
              "empty": false,
              "value": 5
            }
          ],
          "value": 0
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": 120,
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "text": {
          "field": "category",
          "type": "nominal"
        },
        "angle": {
          "field": "value",
          "type": "quantitative",
          "aggregate": "sum",
          "scale": {
            "range": [-90, 270]
          }
        }
      }
    }
  ]
}

额外优化建议 #

• 如果需要显示数值而非分类，把text的field改成value，并可以添加format配置（比如format: ".1f"）
• 调整radius值可以控制标签离饼图的距离，根据饼图大小灵活设置
• 对于小切片，可通过condition配置让标签显示在内部，避免重叠

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