如何在Vega-Lite颜色图例中添加Royalty定量值？

核心思路 #

直接利用Vega-Lite的图例标签自定义功能，把Year和Royalty拼接后作为图例显示文本，不用额外创建圆弧或文本标记，避免图例合并或内容堆叠的问题。

具体实现方法 #

两种方式任选其一即可：

方法1：提前在数据转换中生成拼接字段

在transform环节新增计算字段，将Year和Royalty组合成带格式的字符串，再让图例标签引用这个字段：

{
  "data": {"url": "你的数据源"},
  "transform": [
    {"calculate": "datum.Year + ' (' + datum.Royalty + '%)'", "as": "YearRoyalty"}
  ],
  "mark": {"type": "arc", "innerRadius": 50},
  "encoding": {
    "theta": {"field": "Royalty", "type": "quantitative"},
    "color": {
      "field": "Year",
      "type": "nominal",
      "legend": {
        "label": {"text": {"field": "YearRoyalty"}}
      }
    }
  }
}

方法2：直接在图例标签中用表达式拼接

无需提前转换数据，直接在legend.label.text里写表达式拼接两个字段：

{
  "data": {"url": "你的数据源"},
  "mark": {"type": "arc", "innerRadius": 50},
  "encoding": {
    "theta": {"field": "Royalty", "type": "quantitative"},
    "color": {
      "field": "Year",
      "type": "nominal",
      "legend": {
        "label": {"text": {"expr": "datum.Year + ' (' + datum.Royalty + '%)'"}}
      }
    }
  }
}

为什么之前的方法行不通？ #

• 隐藏圆弧合并图例：Vega-Lite会自动合并同类型编码的图例，这种方式无法单独控制两个图例的显示逻辑。
• 无定位文本标记：单独的文本标记没有绑定图例的布局信息，必然会出现内容堆叠，也没法和图例项一一对应。

内容的提问来源于stack exchange，提问作者Wiremu-Sharman