求助：Vega-Lite堆叠条形图聚合时出现白色分隔线

核心问题排查与修正方向 #

• 聚合配置缺失：如果数据未提前做聚合，且编码中未对数值字段指定聚合函数（如sum），Vega-Lite会把每条数据渲染成独立小分段，直接导致条形拆分。
• 分隔线来源：检查mark的stroke属性或config.view.stroke是否被设为白色，这会产生不必要的分段分隔线。
• 维度字段位置错误：堆叠的细分维度必须放在color通道，不能混入x/y的分组字段中。

修正后的示例代码 #

假设你原代码因上述问题导致条形拆分，以下是调整后的可运行版本：

{
  "data": {"url": "your-data-source.csv"},
  "mark": {
    "type": "bar",
    "stroke": null,
    "strokeWidth": 0
  },
  "encoding": {
    "x": {"field": "主分类", "type": "ordinal"},
    "y": {
      "field": "数值",
      "type": "quantitative",
      "aggregate": "sum"
    },
    "color": {"field": "子分类", "type": "nominal"},
    "tooltip": [
      {"field": "主分类", "type": "ordinal"},
      {"field": "子分类", "type": "nominal"},
      {"field": "数值", "type": "quantitative", "aggregate": "sum", "title": "聚合总值"}
    ]
  },
  "config": {
    "view": {"stroke": null}
  }
}

关键调整说明 #

• 给数值字段添加aggregate: "sum"，强制Vega-Lite对子分类数值做聚合，确保每个主分类下的堆叠块是完整色块而非零散分段。
• 清空mark.stroke并设置strokeWidth:0，彻底移除条形间的白色分隔线。
• tooltip中同步使用聚合函数，保证悬浮时显示的是子分类的聚合后数值。
• 若数据已提前聚合，需确保每个「主分类+子分类」组合仅对应一条数据，避免重复渲染引发的拆分。

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