垂直拼接的FacetChart网格未对齐，如何实现对齐？

问题根源 #

你遇到的网格错位，核心原因是两个独立FacetChart的X轴元素（标题、刻度标签）宽度不一致，再加上垂直拼接时默认对齐逻辑未强制同步子图位置，即使指定了单图宽高和分面间距，X轴区域的动态宽度差异仍会打破整体对齐。

修复方案 #

1. 统一X轴的标题与标签宽度 #

给两个图表的X轴设置固定的标题宽度、刻度标签宽度，确保X轴区域的占位完全一致：

• titleWidth：固定X轴标题的宽度，避免不同标题长度占用不同空间
• labelWidth：固定刻度标签的宽度，防止不同量级的刻度文本长度差异导致偏移

2. 显式垂直拼接并强制对齐 #

用alt.vconcat()替代&符号，显式设置align='all'，强制所有子图在水平方向完全对齐。

3. 确保分面列的类别完全一致 #

检查两个DataFrame的hour列包含的类别（包括顺序）是否完全相同，若某一数据集缺少部分hour值，分面列数会不一致，直接导致对齐失败。

修改后的代码示例 #

import altair as alt

# 第一个分面图表
chart1 = alt.Chart(vert_heat_flux_data_1hr).mark_line().encode(
    alt.X(
        'value:Q', 
        sort='y', 
        title="w'tc'",
        titleWidth=80,  # 固定X轴标题宽度
        axis=alt.Axis(
            labelWidth=60,  # 固定刻度标签宽度
            grid=False
        )
    ),
    alt.Y('height:Q', axis=alt.Axis(grid=False)),
    alt.Color('day:N')
).properties(
    width=73,
    height=100
).facet(
    column='hour:O',
    spacing=7
)

# 第二个分面图表
chart2 = alt.Chart(vert_moisture_flux_data_1hr).mark_line().encode(
    alt.X(
        'value:Q', 
        sort='y', 
        title="w'q'",
        titleWidth=80,  # 和第一个图表保持一致的标题宽度
        axis=alt.Axis(
            labelWidth=60,  # 和第一个图表保持一致的标签宽度
            grid=False
        )
    ),
    alt.Y('height:Q', axis=alt.Axis(grid=False)),
    alt.Color('day:N')
).properties(
    width=73,
    height=100
).facet(
    column='hour:O',
    spacing=7
)

# 显式垂直拼接并强制对齐
alt.vconcat(chart1, chart2, align='all', spacing=15)

额外优化提示 #

如果X轴刻度文本长度差异过大，也可以考虑隐藏X轴标签（若业务允许），通过axis=alt.Axis(labels=False)进一步消除宽度差异的可能。

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