VConcat拼接的Altair交互图表在Streamlit中无法显示如何解决？

核心原因 #

你遇到的问题由两个常见触发点导致：

• 自定义altair_component组件不支持vconcat生成的复合图表对象
• 上下两张图表的颜色编码规则不一致，未设置独立解析规则导致渲染异常

具体解决步骤 #

1. 替换渲染组件：不要使用自定义的Altair渲染组件，直接用Streamlit官方原生的st.altair_chart方法，原生方法对Altair复合拼接图表的支持度最高
2. 增加缩放规则配置：显式设置拼接后图表的颜色维度独立解析，避免Altair自动匹配上下图的颜色规则出错
3. 可选优化：你同时给散点图添加了点击单选、框选两种交互，若仅需要框选联动条形图，可移除冗余的单选选择器避免交互冲突
4. 若修改后仍然无法渲染，升级依赖版本到适配范围：pip install --upgrade streamlit altair （要求Altair≥4.2.0、Streamlit≥1.10.0）

修改后可运行的完整代码 #

import streamlit as st
import altair as alt

def altair_graph(embd_1):
    brush = alt.selection(type='interval')
    selected = alt.selection_single(on="click", empty="none")

    dom = ['Other IDs', 'Slected ID','Sel Dims']
    rng_clr = ['lightgrey', 'red','blue']

    color_point=alt.Color('color', scale=alt.Scale(domain=dom, range=rng_clr))
    color = alt.condition(selected, alt.value('red'), color_point,legend=None)

    chart = alt.Chart(embd_1).mark_circle(size=30).encode(
        x = 'dimention1:Q', 
        y = 'dimention2:Q',
        tooltip=['ID','notes'] ,
        color=color
    ).properties(width=600,height=600).add_selection(brush, selected).interactive()

    bars = alt.Chart(embd_1).mark_bar().encode(
        y='notes:N',
        color='notes:N',
        x='count(notes):Q'
    ).transform_filter(brush).interactive()
    
    final_chart = alt.vconcat(chart, bars)
    # 关键配置：设置颜色维度独立解析，避免上下图颜色规则冲突
    final_chart = final_chart.resolve_scale(color='independent')
    return final_chart

# 用原生方法渲染，开启自动适配页面宽度
st.altair_chart(altair_graph(embd_1), use_container_width=True)

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