如何在Streamlit中自由布局Altair关联交互图表？

要实现Altair图表的自由布局同时保留交互，核心是分离布局逻辑和交互逻辑：用Streamlit的原生布局组件控制图表位置，用Altair的共享选择器维持图表间的交互关联。以下是具体实现方案：

核心原理 #

Altair的交互依赖于共享的选择器对象（如selection_interval、selection_single），只要多个图表引用同一个选择器，无论它们在页面的哪个位置，交互都会同步。Streamlit提供了st.columns、st.container等组件，可实现灵活的页面布局，两者结合即可满足需求。

具体实现步骤 #

1. 导入依赖并准备数据 #

import streamlit as st
import altair as alt
from vega_datasets import data

# 示例数据集
cars = data.cars()

2. 创建共享交互选择器 #

定义一个命名的选择器，确保所有需要联动的图表都能引用它：

# 创建区间选择器（可根据需求换成单选/多选）
brush = alt.selection_interval(name="car_brush")

3. 定义联动的Altair图表 #

所有需要交互联动的图表，都要关联同一个选择器：

# 主交互图表：散点图，作为交互触发源
scatter_chart = alt.Chart(cars).mark_point(size=60).encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color=alt.condition(brush, 'Origin:N', alt.value('#cccccc'))
).add_params(brush)

# 联动图表1：柱状图，展示选中数据的产地分布
bar_chart = alt.Chart(cars).mark_bar().encode(
    x='count()',
    y='Origin:N',
    color='Origin:N'
).transform_filter(brush)

# 联动图表2：折线图，展示选中数据的马力随年份变化趋势
line_chart = alt.Chart(cars).mark_line().encode(
    x='Year:T',
    y='average(Horsepower):Q',
    color='Origin:N'
).transform_filter(brush)

4. 用Streamlit组件自由布局图表 #

通过st.columns、st.container组合，将图表放在页面任意位置：

# 顶部区域：放置主散点图
st.subheader("车辆性能散点图（点击拖拽选择区域）")
st.altair_chart(scatter_chart, use_container_width=True)

# 中部区域：分两列放置两个联动图表
col1, col2 = st.columns([1, 1])
with col1:
    st.subheader("选中车辆的产地分布")
    st.altair_chart(bar_chart, use_container_width=True)

with col2:
    st.subheader("选中车辆的马力年度趋势")
    st.altair_chart(line_chart, use_container_width=True)

# 底部区域：展示筛选后的数据表格
st.subheader("选中的车辆详情")
# 通过选择器过滤数据，实现表格与图表联动
filtered_data = cars[brush.transform(cars)]
st.dataframe(filtered_data, use_container_width=True)

进阶布局技巧 #

• 嵌套布局：可以在st.columns中再嵌套子列，实现更精细的布局；
• 容器定位：用st.container()创建独立区块，将图表放在页面的任意位置（如顶部、中部、底部）；
• 侧边栏布局：将辅助图表或控件放在st.sidebar，主图表放在页面主体，同样能保持交互关联。

关键注意事项 #

• 确保所有联动图表使用同一个选择器对象（或通过名称引用，如alt.selection(name="car_brush")）；
• 避免用Altair的hconcat/vconcat做布局，改用Streamlit的布局组件，更灵活且不影响交互；
• 使用use_container_width=True让图表自适应容器宽度，提升布局兼容性。

内容的提问来源于stack exchange，提问作者C.Banks