Plotly Dash双按钮回调函数失效问题求助：点击不同按钮均显示同一地图

我帮你找出问题所在啦！你的回调函数里有几个关键逻辑错误，导致点击两个按钮都显示同一张地图：

核心问题 #

• raise PreventUpdate后的代码永远不会执行：你在if button == None里先抛出了PreventUpdate异常，后面的return fig1_1根本不会被运行，这完全违背了你的预期。
• 错误的判断条件：按钮的n_clicks初始值是0，永远不会等于None，所以你的两个if/elif条件都不会被触发，回调函数没有返回值，最终可能会保留之前的地图（或者显示空图）。
• 未区分触发回调的按钮：你没有判断是哪个按钮被点击，无法根据不同按钮返回对应的地图。

修正后的完整代码 #

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
from dash import callback_context

# 初始化两张地图
fig1_1 = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = [-74, -70, -70, -74],
    lat = [47, 47, 45, 45],
    marker = {
        'size': 10,
        'color': "orange"
    }
))
fig1_1.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -73, 'lat': 46 },
        'zoom': 5},
    showlegend = False)

fig1_2 = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = [-60, -90, -50, -60],
    lat = [46, 57, 55, 45],
    marker = {
        'size': 10,
        'color': "yellow"
    }
))
fig1_2.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -50, 'lat': 50 },
        'zoom': 5},
    showlegend = False)

app = dash.Dash()

app.layout = html.Div([
    html.Button('Graph1', id='button', n_clicks=0),
    html.Button('Graph2',id='button2',n_clicks=0),
    dcc.Graph(id='graph',figure={})
])

@app.callback(
    Output('graph', 'figure'),
    Input('button', 'n_clicks'),
    Input('button2', 'n_clicks'),
    prevent_initial_call=True  # 初始加载时不触发回调，避免空图
)
def clicked_output(button, button2):
    # 获取触发回调的组件ID
    ctx = callback_context
    if not ctx.triggered:
        raise PreventUpdate
    
    # 解析出触发按钮的ID
    button_id = ctx.triggered[0]['prop_id'].split('.')[0]
    
    # 根据按钮返回对应地图
    if button_id == 'button':
        return fig1_1
    elif button_id == 'button2':
        return fig1_2
    else:
        raise PreventUpdate

if __name__ == '__main__':
    app.run_server(debug=True)

关键改动说明 #

1. 引入callback_context：用来精准判断是哪个按钮触发了回调，这是Dash中区分多输入触发源的常用方法。
2. 添加prevent_initial_call=True：避免页面加载时自动触发回调导致显示空图，只有点击按钮时才会更新地图。
3. 修正逻辑判断：移除无效的None判断，直接根据触发的按钮ID返回对应的地图，确保点击不同按钮显示对应内容。
4. 移除无效代码：删掉了raise PreventUpdate之后的return语句，因为抛出异常后后续代码不会执行，完全是冗余的。

这样修改后，点击Graph1按钮会显示橙色区域的地图，点击Graph2按钮会显示黄色区域的地图，完美符合你的预期！

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