如何在Vega-Lite漏斗图的每个条形中心放置文本？

你当前的漏斗图文本未处于条形中心，核心原因是文本层未同步条形层的x轴堆叠配置，也未设置文本对齐属性。以下是具体修改方案：

修改点说明 #

• 文本层的encoding需添加与条形层一致的x轴配置，确保文本位置与条形匹配
• 为文本标记添加对齐属性，保证水平和垂直方向居中

修改后的完整配置 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "encoding": {
    "y": {"field": "department", "type": "nominal", "sort": "-x"}
  },
  "layer": [
    {
      "mark": {"tooltip": true, "type": "bar"},
      "encoding": {
        "x": {
          "field": "daily_total_login",
          "type": "quantitative",
          "stack": "center"
        },
        "color": {"field": "department", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": {"type": "text", "align": "center", "baseline": "middle"},
      "encoding": {
        "x": {
          "field": "daily_total_login",
          "type": "quantitative",
          "stack": "center"
        },
        "text": {"field": "daily_total_login", "type": "quantitative"}
      }
    }
  ],
  "data": {
    "values": [
      {
        "date": "2024-08-09",
        "department": "A",
        "daily_total_login": 277,
        "daily_active_user": 87
      },
      {
        "date": "2024-08-10",
        "department": "B",
        "daily_total_login": 36,
        "daily_active_user": 9
      },
      {
        "date": "2024-08-11",
        "department": "C",
        "daily_total_login": 39,
        "daily_active_user": 14
      },
      {
        "date": "2024-08-12",
        "department": "D",
        "daily_total_login": 124,
        "daily_active_user": 51
      }
    ]
  },
  "height": "container",
  "width": "container"
}

关键修改细节 #

1. 文本层x轴配置：在文本标记的encoding中添加x字段，复用条形层的stack: "center"配置，让文本的水平位置与条形的中心对齐。
2. 文本对齐属性：给text标记添加align: "center"（水平居中）和baseline: "middle"（垂直居中），确保文本完全处于条形中心位置。

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