VegaLite饼图指示线实现技术咨询

一、饼图到文本的指示线实现 #

可以通过 VegaLite 的图层（layer）功能，结合 arc（饼图主体）、rule（指示线）、text（标签文本）三种标记组合实现，以下是完整示例代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "value": 40},
      {"category": "B", "value": 30},
      {"category": "C", "value": 20},
      {"category": "D", "value": 10}
    ]
  },
  "layer": [
    {
      "mark": {"type": "arc", "innerRadius": 50, "outerRadius": 100},
      "encoding": {
        "theta": {"field": "value", "type": "quantitative"},
        "color": {"field": "category", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "rule", "color": "#333"},
      "encoding": {
        "theta": {"field": "value", "type": "quantitative", "aggregate": "sum", "stack": "normalize"},
        "radius": {"value": 100},
        "radius2": {"value": 130}
      }
    },
    {
      "mark": {"type": "text", "align": "left", "baseline": "middle", "dx": 5},
      "encoding": {
        "theta": {"field": "value", "type": "quantitative", "aggregate": "sum", "stack": "normalize"},
        "radius": {"value": 130},
        "text": {"field": "category", "type": "nominal"},
        "color": {"value": "#333"}
      }
    }
  ]
}

核心逻辑：

• 用 arc 标记绘制饼图主体，通过 innerRadius 和 outerRadius 控制饼图大小
• 用 rule 标记绘制指示线，radius 对应饼图外边缘半径，radius2 控制指示线延伸长度
• 用 text 标记放置标签，通过 theta 与饼图扇区中心角度对齐，radius 与指示线末端位置匹配

二、VegaLite 内部数据查看器替代方法 #

• 内嵌数据到代码：直接将数据写在 data.values 字段中，修改和调试时可直接编辑代码内的数据，实时预览效果
• 加载本地 JSON 文件：将数据保存为独立的 .json 文件，通过 data.url 字段加载，适合大数据集，可直接用文本编辑器修改数据后刷新图表
• 使用官方在线编辑器：在 VegaLite 官方编辑器中，左侧编辑代码，右侧实时预览，同时可在数据面板手动调整数据值，无需依赖内部数据查看器

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