如何堆叠多个VegaLite图表并配置坐标轴（含隐藏X轴）

1. 切换为上下堆叠布局 #

把原来的hconcat（水平拼接）替换成vconcat（垂直拼接），就能让图表从上到下排列。确保所有子图表的X轴字段名、类型完全一致，就能实现视觉上共享时间X轴的对齐效果。

2. 配置XY轴标签 #

在每个图表的encoding字段中，给x和y字段添加title属性，自定义轴的显示标签。示例写法：

"x": {"field": "date", "type": "temporal", "title": "日期"},
"y": {"field": "uv", "type": "quantitative", "title": "独立访客数"}

3. 隐藏前两个图表的X轴 #

在前两个图表的encoding.x里设置axis: null，就能直接隐藏对应的X轴。第三个图表保留正常的X轴配置即可。

完整示例代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2024-05-01", "uv": 320, "pv": 890, "conversion": 0.042},
      {"date": "2024-05-02", "uv": 450, "pv": 1200, "conversion": 0.038},
      {"date": "2024-05-03", "uv": 380, "pv": 950, "conversion": 0.045}
    ]
  },
  "vconcat": [
    // 第一个图表：隐藏X轴，配置Y轴标签
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "y": {"field": "uv", "type": "quantitative", "title": "独立访客数"}
      }
    },
    // 第二个图表：隐藏X轴，配置Y轴标签
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "y": {"field": "pv", "type": "quantitative", "title": "页面浏览量"}
      }
    },
    // 第三个图表：保留X轴，配置XY轴标签
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "统计日期"},
        "y": {"field": "conversion", "type": "quantitative", "title": "转化率"}
      }
    }
  ]
}

补充提示 #

• 所有子图表的X轴字段需保持一致，才能保证上下图表的X轴刻度完全对齐。
• 如果需要统一调整轴的样式（比如字体、颜色），可以在顶层的config字段中设置全局轴配置。

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