Plotly Dash下拉选择后图表未更新、重复显示折线图问题

核心问题根因 #

异常由3处代码编写错误直接导致：

• 报告类型下拉选项的OPT1值多了多余的.符号，导致判断逻辑永远命中延迟报告分支，自然输出5份折线图
• 回调函数的Output参数格式错误，5个输出被拆成两个独立列表，返回值和输出位置对应关系异常
• 性能报告的折线图color参数列名拼写错误，缺少下划线触发绘图报错，间接导致数据不跟随参数更新

具体修复步骤 #

1. 修正下拉选项值 #

删除报告类型下拉第一个value里多余的.：

dcc.Dropdown(id='input-type', 
            options=[{'label': 'Yearly Airline Performance Report', 'value': 'OPT1'},
                    {'label': 'Yearly Airline Delay Report', 'value': 'OPT2'}],
            placeholder='Select a report type',
            style={'width':'80%', 'padding':'3px', 'font-size': '20px', 'text-align-last' : 'center'})

2. 修正回调Output格式 #

将5个Output合并到同一个列表中：

@app.callback( [Output(component_id='plot1', component_property='children'),
                Output('plot2','children'),
                Output('plot3','children'),
                Output('plot4','children'),
                Output('plot5','children')],
               [Input(component_id='input-type', component_property='value'),
                Input(component_id='input-year', component_property='value')],
               [State("plot1", 'children'), State("plot2", "children"),
                State("plot3", "children"), State("plot4", "children"),
                State("plot5", "children")
               ])

3. 修正折线图列名拼写 #

将color参数的列名改为带下划线的正确字段：

line_fig = px.line(line_data, x='Month', y='AirTime', color='Reporting_Airline', title='Average monthly flight time (minutes) by airline')

4. 可选：增加空值判断避免初始报错 #

在回调函数开头加空值判断，下拉未选值时不触发更新：

def get_graph(chart, year, children1, children2, c3, c4, c5):
        if not chart or not year:
            return no_update, no_update, no_update, no_update, no_update
        # 原有逻辑保持不变

修改完成后重新运行即可正常切换报告类型、渲染对应图表，数据会跟随选择的年份同步更新。

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