如何为Vegalite绘制的水平堆叠条形图添加垂直滚动条？

Vega-Lite v5及以上版本原生支持滚动视图配置，无需依赖第三方工具，在Observable notebook环境下可直接生效，具体配置方式如下： #

核心配置步骤 #

• 固定图表可视区域的整体高度：不要设置自适应高度，填固定值即可，超出该高度的内容会自动进入滚动区域
• 开启垂直滚动配置：在顶层view参数中添加"scroll": "y"，同时搭配"bounds": "flush"保证滚动区域对齐，不会出现内容偏移
• 保留水平堆叠条形图的常规编码配置：y轴绑定离散分类字段，x轴绑定连续数值字段，color通道设置stack: true开启堆叠效果

可直接复用的示例代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 600, // 可自定义图表宽度
  "height": 400, // 固定可视区域高度，根据你的展示需求调整
  "view": {"scroll": "y", "bounds": "flush"}, // 开启垂直滚动的核心配置
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "category", // 替换为你的分类字段名
      "type": "nominal",
      "axis": {"title": "分类"}
    },
    "x": {
      "field": "value", // 替换为你的数值字段名
      "type": "quantitative",
      "axis": {"title": "数值"},
      "stack": true
    },
    "color": {
      "field": "group", // 替换为你的分组字段名
      "type": "nominal",
      "legend": {"title": "分组"}
    }
  },
  "data": {
    // 替换为你的数据集配置，Observable中可直接绑定导入的数据集
    "values": [
      {"category": "分类1", "group": "A组", "value": 10},
      {"category": "分类1", "group": "B组", "value": 20},
      {"category": "分类2", "group": "A组", "value": 15},
      {"category": "分类2", "group": "B组", "value": 25}
      // 更多分类数据，超出400px高度后自动出现滚动条
    ]
  }
}

注意事项 #

• 无需修改Observable notebook的全局容器样式，上述配置会自动生成带滚动条的独立绘图容器
• 单屏展示的分类数量可以通过调整height参数控制，高度越小单屏展示的分类越少
• 若数据量级过万，可以搭配Vega-Lite的selection配置实现虚拟滚动优化性能，普通场景下上述配置完全够用

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