如何在Streamlit中动态切换Plotly图表？

核心思路 #

用Streamlit的st.button()创建性别选择按钮，搭配st.columns()划分页面布局，根据按钮点击状态动态渲染对应性别的Plotly图表。

完整代码示例 #

import streamlit as st
import plotly.express as px
import pandas as pd

# 模拟性别数据（实际项目替换为你的真实数据）
female_data = pd.DataFrame({
    "类别": ["A", "B", "C", "D"],
    "数值": [23, 45, 12, 30]
})

male_data = pd.DataFrame({
    "类别": ["A", "B", "C", "D"],
    "数值": [35, 22, 40, 18]
})

# 划分左右列布局，左侧放图表，右侧放按钮
col1, col2 = st.columns([2, 1])

# 在右侧列设置按钮区域
with col2:
    st.subheader("选择性别")
    female_clicked = st.button("Female")
    male_clicked = st.button("Male")

# 在左侧列根据按钮状态渲染图表
with col1:
    st.subheader("数据图表")
    if male_clicked:
        # 生成男性数据的柱状图
        fig = px.bar(male_data, x="类别", y="数值", title="Male Data")
        st.plotly_chart(fig, use_container_width=True)
    else:
        # 默认或点击Female时展示女性图表
        fig = px.bar(female_data, x="类别", y="数值", title="Female Data")
        st.plotly_chart(fig, use_container_width=True)

关键说明 #

• 按钮状态逻辑：st.button()点击后会返回True，页面重新渲染时未点击的按钮返回False，以此触发图表切换。
• 布局适配：st.columns()通过比例参数控制左右列宽度，让按钮和图表区域分布更合理。
• 图表渲染：st.plotly_chart()直接接收Plotly的fig对象，use_container_width=True可让图表自适应列宽。

优化建议 #

如果需要保留用户的选择状态（比如点击后按钮保持激活状态），可以改用st.radio()组件，体验更流畅：

# 替换按钮为单选框的示例
with col2:
    gender = st.radio("选择性别", ["Female", "Male"])
with col1:
    if gender == "Male":
        fig = px.bar(male_data, x="类别", y="数值", title="Male Data")
    else:
        fig = px.bar(female_data, x="类别", y="数值", title="Female Data")
    st.plotly_chart(fig, use_container_width=True)

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