Dash技术问题：如何用重置按钮清除图表与下拉菜单

问题核心 #

当前代码存在两个关键问题：

• 图表生成回调在大陆/国家选择为空时触发PreventUpdate，导致Dropdown重置后图表无法同步清空。
• 重置按钮回调未处理初始点击次数为None的情况，且大陆重置后国家Dropdown的禁用状态未正确联动。

修改方案 #

1. 完善国家Dropdown的联动逻辑：当大陆选择为空时，自动清空国家选项并禁用选择器。
2. 调整图表生成逻辑：参数为空时返回空图表，而非阻止更新，实现图表随Dropdown同步重置。
3. 修复重置按钮回调：处理初始状态，避免无意义的更新触发。

修改后的完整代码 #

from dash import Dash, dcc, html, Output, Input, callback
from dash.exceptions import PreventUpdate
import pandas as pd
import plotly.express as px

df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            options=df['continent'].unique(),
            placeholder="Select a continent",
            clearable=True,
            id='continent'
        ),
        dcc.Dropdown(
            value=None,
            placeholder="Select a country",
            clearable=True,
            id='country',
            disabled=True
        )
    ], style={'width': '48%', 'display': 'inline-block'}),

    dcc.Graph(id='graph'),
        
    html.Button(id='reset', children='Reset'),
    
    html.Div(id='text')
])

@callback(
    Output('country', 'options'),
    Output('country', 'disabled'),
    Input('continent', 'value')
)
def update_country_options(continent_val):
    if continent_val is None:
        return [], True
    return df.country[df.continent == continent_val].unique(), False

@callback(
    Output('graph', 'figure'),
    Input('continent', 'value'),
    Input('country', 'value')
)
def update_fig(continent_val, country_val):
    if (continent_val is None) or (country_val is None):
        return px.line()  # 返回空图表
    mask = (df.continent == continent_val) & (df.country == country_val)
    dff = df[mask]
    fig = px.line(dff, x='year', y='lifeExp')
    fig.update_layout(transition_duration=500)
    return fig

@callback(
    Output('continent', 'value'),
    Output('country', 'value'),
    Input('reset', 'n_clicks')
)
def reset_components(nclick):
    if nclick is None:
        raise PreventUpdate()
    return None, None

@callback(
    Output('text', 'children'),
    Input('reset', 'n_clicks')
)
def show_click_count(nclick):
    return f'Button has been clicked {nclick if nclick else 0} times'

if __name__ == '__main__':
    app.run(port=8004)

说明 #

点击Reset按钮后，两个Dropdown会被清空，国家选择器自动禁用，图表变为空状态，完全符合重置需求；同时修复了初始加载时的回调触发问题，避免不必要的错误。

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