Dash实现用户多选图表类型同时展示多图的问题求助

错误原因 #

报错由两个核心问题导致：

• 开启Dropdown的multi=True后，组件返回值从单个字符串变为字符串列表，原回调逻辑仅适配单值判断，没有覆盖空值、多值分支，导致fig变量在未赋值的情况下被引用，触发UnboundLocalError
• 原回调仅返回单个Figure对应单个固定Graph组件，无法承载多个图表的渲染需求

修复步骤 #

1. 调整页面布局 #

移除原有固定的单个dcc.Graph组件，替换为动态图表容器，所有选中的图表会自动插入到该容器中：

# 原布局代码（单图表）
dcc.Graph(id='my_graph')

# 替换为动态容器
html.Div(id='graph_container')

同时取消图表类型Dropdown的multi=True注释，确保多选功能正常开启。

2. 重写回调逻辑 #

将回调输出从单个Figure改为容器的子元素列表，遍历选中的图表类型逐个生成对应图表：

from dash import dcc, html
import plotly.express as px

# 回调定义修改
@app.callback(
    Output('graph_container', 'children'),
    Input('x_axis_dropdown', 'value'),
    Input('y_axis_dropdown', 'value'),
    Input('chart_type_dropdown', 'value')
)
def update_graphs(x_col, y_col, selected_chart_types):
    # 边界处理：未选全必填参数时返回空
    if not x_col or not y_col or not selected_chart_types:
        return []
    
    graph_components = []
    for chart_type in selected_chart_types:
        # 按选中类型生成对应图表
        if chart_type == 'line':
            fig = px.line(df, x=x_col, y=y_col, title="折线图")
        elif chart_type == 'pie':
            fig = px.pie(df, names=x_col, values=y_col, title="饼图")
        elif chart_type == 'bar':
            fig = px.bar(df, x=x_col, y=y_col, title="柱状图")
        else:
            continue
        # 支持自定义样式实现并排布局
        graph_components.append(
            dcc.Graph(
                figure=fig,
                style={'width': '48%', 'display': 'inline-block', 'margin': '1%'}
            )
        )
    return graph_components

可选优化 #

如果需要单独控制每个图表的参数、交互效果，可以给动态生成的dcc.Graph设置唯一id，后续新增回调单独处理对应图表的更新逻辑即可。

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