使用 VConcat 在 Streamlit 中未显示 Altair 图表

Posted

技术标签:

【中文标题】使用 VConcat 在 Streamlit 中未显示 Altair 图表【英文标题】:Altair chart not showing up in Streamlit with VConcat 【发布时间】:2021-11-09 06:55:04 【问题描述】:

我尝试使用 streamlit 投影 altair 图表。我的要求是以这样的方式投影两个图表,如果我在上面的图表中选择几个带有分散点的点,我应该在下面的图表中看到变量('notes')的分布。为此,我编写了以下代码,我在函数中使用了 vconcat。但是,当我使用 vconcat 时,图表永远不会出现。但是,当我尝试投影单个图表时它工作正常。

    def altair_graph(embd_1):
    
        selected = alt.selection_single(on="click", empty="none")
        brush = alt.selection(type='interval')
    
        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).add_selection(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 = ((chart & bars))
        final_chart = alt.vconcat(chart,bars)
    
        return final_chart

selected=altair_component(altair_chart=altair_graph(embd_1))

【问题讨论】:

【参考方案1】:

根据您的 sn-p,我假设您正在使用 streamlit-vega-lite 自定义组件的 altair 部分。目前好像是not possible to use the streamlit-vega-lite component to retrieve selections from compound charts。

也就是说,我并不完全清楚为什么图表根本没有显示。如果没有minimal reproducible example,我们就无法测试。我最近遇到了一个类似的案例,它可以单独绘制图表,也可以将图表组合在一起。选择也可以这样工作,但是,值不会反映在从altair_component返回的事件字典中

【讨论】:

以上是关于使用 VConcat 在 Streamlit 中未显示 Altair 图表的主要内容,如果未能解决你的问题,请参考以下文章

Streamlit应用程序使用Streamlit-Authenticator进行用户的安全身份验证实践

Streamlit应用程序使用Streamlit-Authenticator进行用户的安全身份验证实践

Macbook 上的 Streamlit

如何使用python在streamlit和plotly中创建列?

如何将 pandas.style 与 streamlit 一起使用

如何在streamlit中使用多选执行特定任务?