如何在Vega-Lite堆叠柱状图中按阈值仅显示显著数值？

问题描述 #

尝试创建堆叠柱状图，要求仅显示占区域总计绝对值10%以上的数值标签。测试数据中West区域总计为755，Electronics的50占比约6.6%（低于阈值），预期不显示其标签，但当前代码仍显示该标签。

错误原因 #

你的代码中多余的聚合步骤完全冗余——原始数据中每个region+category组合仅对应一条记录，无需再次聚合；同时直接通过opacity控制显示时，若堆叠计算的位置与数据匹配出现偏差，可能导致本应隐藏的标签意外显示。

修正方案 #

1. 移除冗余的aggregate变换步骤，直接使用原始sales字段计算占比。
2. 在文本标记层添加过滤变换，直接筛选出符合阈值条件的记录，从根源上避免显示不需要的标签（比opacity控制更可靠）。

修正后的完整代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"region": "West", "category": "Electronics", "sales": 50},
      {"region": "West", "category": "Furniture", "sales": 800},
      {"region": "West", "category": "Books", "sales": -95}
    ]
  },
  "transform": [
    {
      "window": [{"op": "sum", "field": "sales", "as": "region_total"}],
      "groupby": ["region"]
    },
    {
      "calculate": "abs(datum.sales) / datum.region_total > 0.1",
      "as": "show_label"
    }
  ],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "region", "type": "nominal", "title": "Region"},
        "y": {
          "field": "sales",
          "type": "quantitative",
          "stack": true,
          "title": "Sales"
        },
        "color": {"field": "category", "type": "nominal", "title": "Category"},
        "tooltip": [
          {"field": "region", "type": "nominal"},
          {"field": "category", "type": "nominal"},
          {"field": "sales", "type": "quantitative", "format": ",.0f"}
        ]
      }
    },
    {
      "transform": [{"filter": "datum.show_label"}],
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dy": -5
      },
      "encoding": {
        "x": {"field": "region", "type": "nominal"},
        "y": {
          "field": "sales",
          "type": "quantitative",
          "stack": "center"
        },
        "text": {
          "field": "sales",
          "type": "quantitative",
          "format": ",.0f"
        }
      }
    }
  ],
  "width": 400,
  "height": 300,
  "config": {"axis": {"grid": false}}
}

验证说明 #

• 阈值计算：West区域总计755，10%阈值为75.5
  • Electronics的50绝对值（50）<75.5 → 被过滤，不显示标签
  • Furniture的800绝对值（800）>75.5 → 显示标签
  • Books的-95绝对值（95）>75.5 → 显示标签
• 文本层通过filter变换直接移除不符合条件的记录，确保只有达标标签被渲染，避免opacity控制可能出现的意外问题。

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