如何使用Vega为分组柱状图添加指定类别的交替背景条纹

核心实现逻辑是在柱状图层之前新增一层背景矩形标记，通过条件判断控制对应类别的背景填充色即可。

操作步骤 #

1. 找到原配置中的marks配置段，在所有现有mark项的最前面插入如下背景矩形配置：

{
  "type": "rect",
  "from": {"data": "table"},
  "encode": {
    "enter": {
      // 背景左右边界匹配分类轴的带宽，offset可按需调整宽度
      "x": {"scale": "x", "field": "category", "offset": -8},
      "x2": {"scale": "x", "field": "category", "band": 1, "offset": 8},
      // 背景上下边界覆盖整个绘图区域
      "y": {"signal": 0},
      "y2": {"signal": "height"},
      // 条件判断：A、C类填充浅灰，B类透明保留白底
      "fill": [
        {"test": "datum.category == 'A' || datum.category == 'C'", "value": "#f0f0f0"},
        {"value": "transparent"}
      ]
    }
  }
}

2. 无需额外调整层级，Vega会按照marks数组的顺序渲染，先插入的背景层会自动置于柱状图层下方，不会遮挡柱子内容。

自定义调整说明 #

• 若需要修改灰度深浅，直接替换#f0f0f0为目标色值即可
• 若需要调整背景条纹的左右边距，修改x和x2的offset参数即可
• 若后续需要切换为奇偶交替的通用条纹，可将test判断改为indexof(datum.category, domain('x')) % 2 == 0即可适配任意分类数量的交替效果

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