Vega堆叠柱状图中如何为各分段添加内嵌标签？

你需要的垂直堆叠柱状图内嵌标签效果可以通过调整Vega spec实现，以下是修正后的完整可运行代码：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "堆叠柱状图内嵌标签示例",
  "width": 294,
  "height": 200,
  "padding": 5,
  "autosize": {"type": "fit-x", "contains": "padding"},
  
  "data": [
    {
      "name": "categories",
      "values": [
        {"y": 5, "c": 0, "name": "other"},
        {"y": 7, "c": 1, "name": "corn"},
        {"y": 22, "c": 2, "name": "pasture/hay"},
        {"y": 31, "c": 3, "name": "developed"},
        {"y": 35, "c": 4, "name": "forest"}
      ],
      "transform": [
        {
          "type": "stack",
          "field": "y"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true, "zero": true,
      "domain": {"data": "categories", "field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "categories", "field": "c"}
    }
  ],

  "axes": [],

  "marks": [
    // 堆叠柱状图矩形
    {
      "name": "bars",
      "type": "rect",
      "from": {"data": "categories"},
      "encode": {
        "enter": {
          "x": {"value": 0},
          "width": {"value": 294},
          "y": {"scale": "y", "field": "y0"},
          "y2": {"scale": "y", "field": "y1"},
          "fill": {"scale": "color", "field": "c"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
        "hover": {
          "fillOpacity": {"value": 0.5}
        }
      }
    },
    // 内嵌标签文本
    {
      "name": "labels",
      "type": "text",
      "from": {"data": "categories"},
      "encode": {
        "enter": {
          "x": {"value": 147}, // 柱状图宽度的一半，居中显示
          "y": {"scale": "y", "signal": "(datum.y0 + datum.y1)/2"}, // 分段垂直居中
          "fill": {
            "signal": "contrast('white', scale('color', datum.c)) > contrast('black', scale('color', datum.c)) ? 'white' : 'black'"
          },
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "text": {"field": "name"},
          "fontSize": {"value": 12}
        }
      }
    }
  ]
}

关键修改说明 #

• 移除冗余group结构：原spec中的group层会导致数据上下文混乱，直接用两个独立的mark层（rect和text）即可实现需求。
• 文本垂直居中：通过(datum.y0 + datum.y1)/2计算分段的垂直中点，再经y scale转换后定位文本。
• 自适应文本颜色：通过contrast函数对比背景色与黑白的对比度，自动选择更清晰的文本颜色。
• 文本水平居中：设置x为柱状图宽度的一半（294/2=147），确保文本在分段内水平居中。

该方案可实现你期望的效果：每个堆叠分段内居中显示对应的名称，文本颜色自动适配背景，鼠标悬停时分段会半透明高亮。

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