Plotly Express更新图表后残留多余线条的解决方法求助

核心问题分析 #

导致旧线条残留的关键原因有两个：

• 回调未返回新图表：你的update_graph函数创建了新的图表对象，但没有将其返回给输出目标，导致图表从未真正被更新。
• 数据未彻底重置：如果每次回调时yy数据框没有基于最新输入重新生成，而是保留了旧的预测数据，也会导致多余线条出现。

修复方案 #

1. 确保回调返回新图表

在update_graph函数末尾添加return fig，让Dash接收并渲染全新的图表对象。

2. 每次回调重新生成数据

确保yy数据框是基于当前输入参数（idx、one至five）重新创建的，彻底抛弃旧数据。同时处理输入为空（None）的情况，避免生成无效数据。

修正后的代码示例

app.layout = html.Div(children=[
    html.Div("----  Overall"),
    html.Div(
        children=[
            html.Div(children="ids"),
            dcc.Dropdown(id='idx'),
        ]
    ),
    html.Div("----  One"),
    dcc.Input(
        id="one",
        type='number',
        debounce=True,
        placeholder="one",style=dict(width='10%')
    ),
    dcc.Input(
        id="two",
        type='number',
        debounce=True,
        placeholder="two",style=dict(width='10%')
    ),
    dcc.Input(
        id="three",
        type='number',
        debounce=True,
        placeholder="three",style=dict(width='10%')
    ),
    dcc.Input(
        id="four",
        type='number',
        debounce=True,
        placeholder="four",style=dict(width='10%')
    ),
    dcc.Input(
        id="five",
        type='number',
        debounce=True,
        placeholder="five",style=dict(width='10%')
    ),
    dcc.Graph(
        id='test',
    )
])

@app.callback(
    Output('test', 'figure'),
    [Input('idx', 'value'),Input('one', 'value'),Input('two', 'value'),Input('three', 'value')
    ,Input('four', 'value'),Input('five', 'value')])
def update_graph(idx,one,two,three,four,five):
    # 处理空输入，设置默认值
    one = one or 0
    two = two or 0
    three = three or 0
    four = four or 0
    five = five or 0
    
    # 基于当前输入重新生成数据框（替换为你的实际数据逻辑）
    import pandas as pd
    months = ['Jan','Feb','Mar','Apr','May']
    yy = pd.DataFrame({
        'year': [idx]*5,
        'month': months,
        'qty': [one, two, three, four, five]
    })
    
    # 创建全新图表
    fig = px.line(yy , x='month', y="qty",
              color="year",
              text='qty',
              custom_data=['year'],
             )
    fig.update_layout(hovermode='x unified')
    fig.update_traces(
        hovertemplate="<br>".join([
            "qty: %{y}",
        ])
    )
    
    # 返回新图表完成更新
    return fig

额外注意事项 #

• 每次创建新图表对象：始终用px.line()生成全新的fig，不要在旧图表上修改，确保彻底重置图表状态。
• 输入合法性校验：添加输入参数的校验逻辑，避免无效值导致的数据异常。

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