如何让Vega-Lite在数值为0时显示堆叠条形图标签？

问题核心是当客户数为0时，文本标记的内容或位置未正确配置，导致标签不渲染。通过以下调整可解决：

修改要点 #

• 强制0值的文本内容显示为"0"，避免空值或不渲染
• 动态调整文本的x位置，确保0值标签在可视区域内
• 优化文本编码的类型与格式，保证数值正确转换为文本

修改后的完整代码 #

{
  "layer": [
    {
      "mark": {
        "type": "bar",
        "cornerRadius": 50,
        "color": "#90C290",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "Number of customers",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "tooltip": true,
        "align": "left",
        "baseline": "middle",
        "color": "white"
      },
      "encoding": {
        "text": {
          "condition": {"test": "datum['Number of customers'] === 0", "value": "0"},
          "field": "Number of customers",
          "type": "quantitative",
          "format": "d"
        },
        "x": {
          "condition": {"test": "datum['Number of customers'] === 0", "value": 10},
          "field": "Number of customers",
          "type": "quantitative",
          "offset": 10
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "Sales channel",
      "type": "nominal",
      "sort": "descending",
      "title": null
    },
    "x": {
      "type": "quantitative",
      "title": null,
      "axis": null
    }
  }
}

关键调整说明 #

1. 文本内容处理：在text编码中添加condition，当客户数为0时直接返回"0"，同时用format: "d"确保非0数值以整数格式显示。
2. 位置动态调整：x编码中添加条件判断，0值时固定x为10（靠近y轴），非0值时基于客户数值加10偏移，保证文本在条形右侧。
3. 移除固定位置：删除文本mark中的x:10，改用编码层的x配置，让位置逻辑更清晰且适配不同数值情况。

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