如何在David Bacci的Deneb甘特图中正确启用垂直滚动条？

数据老陈

2026-4-15

嗨，我来帮你搞定这个垂直滚动的问题！你之前只调整padding的方式确实不够，因为Deneb（基于Vega-Lite）的垂直滚动需要结合视图配置、高度设置和轴的正确编码，才能让内容正常滚动不出现空白。

给你一套具体的修改步骤，照着来应该就能解决：

第一步：设置固定的图表可视高度
在你的甘特图Spec最外层（$schema下面）添加一个固定的height值，比如"height": 600（你可以根据自己的需求调整这个数值）。这样图表就有了固定的可视区域，超出的任务内容就会触发滚动，而不是自适应拉伸高度。
第二步：修正padding配置
你之前把bottom设为100的数值太大了，会导致底部出现大量空白。建议调整为更合理的数值，同时保持其他方向的padding不变：
```
"padding": {
  "left": 5,
  "right": 0,
  "top": 5,
  "bottom": 20
}
```
第三步：启用视图的滚动属性
在Spec的config部分（如果没有就新增）添加视图的滚动配置，确保允许垂直滚动：
```
"config": {
  "view": {
    "scrollable": true,
    "continuousHeight": true
  }
}
```
第四步：确保Y轴编码不固定范围
检查你Y轴（对应任务名称的轴）的编码，不要设置固定的domain值，让它自动适配所有任务数据，这样滚动时才能加载出所有任务。正确的Y轴编码大概是这样的：
```
"y": {
  "field": "Task",
  "type": "nominal",
  "axis": {
    "title": null,
    "labelPadding": 5
  }
}
```
要是你之前加了scale: { domain: [...] }这种固定任务列表的配置，一定要删掉，不然只会显示你指定的那些任务，滚动时自然会出现空白。