如何使Quarto仪表板中通过alt.hconcat()拼接的Altair图表自适应容器大小？

你说的情况我太熟悉了——Quarto文档确实提到Altair图表会自动调整大小以适配仪表板容器，但只有单个alt.Chart()能做到，用alt.hconcat()拼接的组合图表就失灵了，这确实是个容易踩的小坑。

别担心，有两种简单的方法可以解决这个问题，让拼接后的图表也能完美自适应容器：

方案一：给拼接后的组合图表设置响应式属性 #

直接在alt.hconcat()的结果上调用.properties()方法，把宽高设置为'container'，这样整个组合图表就会自动适配所在容器的大小：

#| title: 自适应的横向拼接图表
import altair as alt
from vega_datasets import data

source = data.iowa_electricity()

chart1 = alt.Chart(source).mark_area(opacity=0.3).encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack(None),
    color="source:N"
)

chart2 = alt.Chart(source).mark_area(opacity=0.3).encode(
    y="year:T",
    x=alt.X("net_generation:Q").stack(None),  # 这里修正了你代码里的小错误：x轴应该用alt.X而非alt.Y
    color="source:N"
)

# 为拼接后的图表添加自适应属性
alt.hconcat(chart1, chart2).properties(
    width='container',
    height='container'
)

方案二：给每个子图表单独设置自适应尺寸 #

如果你希望两个子图表各自占容器宽度的一部分，可以给每个子图表设置width='50%'（或者其他比例），这样拼接后的组合图表会自动适配容器：

#| title: 子图表按比例自适应拼接
import altair as alt
from vega_datasets import data

source = data.iowa_electricity()

chart1 = alt.Chart(source).mark_area(opacity=0.3).encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack(None),
    color="source:N"
).properties(width='50%')  # 每个子图表占容器宽度的50%

chart2 = alt.Chart(source).mark_area(opacity=0.3).encode(
    y="year:T",
    x=alt.X("net_generation:Q").stack(None),
    color="source:N"
).properties(width='50%')

alt.hconcat(chart1, chart2)

为什么会出现这个问题？ #

单个alt.Chart()默认会继承Quarto仪表板的容器自适应设置，但alt.hconcat()在默认情况下会使用子图表的固定默认尺寸，不会自动触发容器适配，所以我们需要手动指定响应式的宽高属性来让它自适应。

内容来源于stack exchange