Dash Plotly多选下拉菜单绘图遇Callback错误，求修正方案

原代码存在的问题 #

• 缺失核心组件导入：未导入Dash、dcc、Input、Output，导致代码运行基础依赖缺失
• 下拉菜单选项格式错误：dcc.Dropdown的options需为包含label和value的字典列表，直接传入列名列表不符合组件要求
• 多选数据处理逻辑错误：选中多列时，px.line无法直接接收多列作为x参数，需转换数据格式才能绘制多条曲线
• 空值判断逻辑不全：初始下拉菜单值为空列表[]，原代码仅判断X is None无法覆盖该场景

修改后的完整代码 #

import dash_bootstrap_components as dbc
import pandas as pd
import numpy as np
import plotly.express as px
from dash import Dash, dcc, Input, Output
from dash.exceptions import PreventUpdate

df = pd.DataFrame(np.random.randn(100, 5))
df.columns = ['col1', 'col2', 'col3', 'col4', 'col5']

app = Dash(external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dcc.Dropdown(
                id='mydd1',
                options=[{"label": col, "value": col} for col in df.columns[:4]],
                multi=True,
                clearable=True,
                value=[]
            )
        ], width=4),
    ]),

    dbc.Row([
        dbc.Col([
            dcc.Graph(id='mygraph1', figure={})
        ], width=8),
    ])

], fluid=True)

@app.callback(
    Output('mygraph1', 'figure'),
    Input('mydd1', 'value'),
)
def update_graph(selected_cols):
    if not selected_cols:
        raise PreventUpdate
    
    # 将宽格式数据转为长格式，适配多列绘图需求
    melted_df = df.melt(id_vars=['col5'], value_vars=selected_cols, var_name='X轴列', value_name='X值')
    
    # 按选中的X轴列分组绘制多条曲线
    fig = px.line(melted_df, x='X值', y='col5', color='X轴列', markers=True)
    fig.update_layout(title='多X轴列对比曲线', xaxis_title='X值', yaxis_title='col5')
    return fig

if __name__ == "__main__":
    app.run_server(debug=True, port=8055)

关键修改说明 #

1. 补充核心组件导入，确保代码运行依赖完整
2. 重构下拉菜单选项为标准字典格式，保证组件正常渲染
3. 使用df.melt转换数据格式，将多列X轴数据整合为可分组的长格式，实现多曲线同时绘制
4. 修正空值判断逻辑，覆盖初始空列表的场景，避免无意义绘图
5. 调整图表列宽，优化可视化展示效果

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