Plotly Dash如何通过下拉菜单切换不同DataFrame对应图表

核心设计逻辑：

• 摒弃原有布局内同时渲染两张固定图表的方式，避免一次性加载冗余图表资源、重复处理组件显隐的额外开销
• 采用「单图表容器 + 动态回调渲染」模式，通过下拉菜单的选中状态，动态在同一个图表容器中加载对应的数据可视化对象，代码逻辑更简洁，资源效率更高。

分步实现细节 #

1. 依赖补充
   原有代码缺少交互回调所需的导入项，需要新增from dash.dependencies import Input, Output，用来绑定下拉组件和图表组件的联动关系。
2. 布局结构调整
   • 移除原有代码中两个写死的dcc.Graph组件
   • 在页面标题下方新增居中放置的下拉选择组件，配置两个选项分别对应颜色数据集的柱状图、字母数据集的线柱组合图
   • 仅保留一个固定id的dcc.Graph作为全局统一的图表渲染容器
3. 联动回调编写
   定义回调函数，以下拉组件的选中值为输入，以统一图表容器的figure属性为输出，根据选中值直接返回预先构建完成的fig或fig1对象，无额外运算开销。

完整可运行代码 #

import pandas as pd
import dash
import plotly.express as px
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

# 保留原有数据集和图表对象构建逻辑
data = [['Blue',20],['Red ',12],['Green',33]]
df = pd.DataFrame(data,columns=['Color','Number'])

data1 = [['A',10,88],['B ',50,45],['C',25,120]]
df1 = pd.DataFrame(data1,columns=['Letter','Column1','Column2'])

fig = px.bar(df, x=df['Color'], y=df['Number'])
fig1 = px.line(x=df1['Letter'], y=df1['Column1'], color=px.Constant('Column1'),
             labels=dict(x='Letter', y='Column1', color='Letter'))
fig1.add_bar(x=df1['Letter'], y=df1['Column2'], name='Letter')

# 调整后的页面布局
app.layout = html.Div(children=[
    html.H1(children='Colors and Letters', style={'text-align': 'center'}),
    # 下拉选择器，默认选中第一个图表
    dcc.Dropdown(
        id='chart-selector',
        options=[
            {'label': 'Color 柱状图', 'value': 'color'},
            {'label': 'Letter 组合图', 'value': 'letter'}
        ],
        value='color',
        style={'width': '50%', 'margin': '20px auto', 'display': 'block'}
    ),
    # 动态渲染的图表容器
    dcc.Graph(id='dynamic-chart')
])

# 下拉与图表的联动回调
@app.callback(
    Output('dynamic-chart', 'figure'),
    Input('chart-selector', 'value')
)
def render_matched_chart(selected_option):
    if selected_option == 'color':
        return fig
    elif selected_option == 'letter':
        return fig1

if __name__ == '__main__':
    app.run_server(debug=True)

补充说明：如果使用Dash 2.0及以上版本，dash_core_components和dash_html_components已经整合到Dash核心包中，可直接通过from dash import dcc, html导入，无需单独安装旧版本的独立组件包。

内容的提问来源于stack exchange，提问作者Bojan Pavlović