如何在Dash仪表盘中实现点击数据点后重定向至生成的URL？

要解决点击Dash图表数据点后跳转到指定URL的需求，推荐使用Dash原生的dcc.Location组件来管理路由跳转，以下是具体实现方案：

步骤1：修正现有代码的错误 #

你的代码里存在几处细节问题，需要先修正：

• 回调的Input id应为example-graph（和布局中Graph组件的id对应）
• childern拼写错误，正确写法是children
• 无需借助dummy-div，直接用dcc.Location来控制跳转

步骤2：完整实现代码 #

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

# 示例绘图函数（替换成你自己的plot()）
def plot():
    df = pd.DataFrame({
        "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
    })
    fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
    return fig

app = Dash(__name__)

app.layout = html.Div(children=[
    # 添加dcc.Location组件管理路由
    dcc.Location(id='url', refresh=True),
    html.H1(children='Plot'),
    dcc.Graph(id='example-graph', figure=plot()),
])

@app.callback(
    Output('url', 'href'),
    Input('example-graph', 'clickData'),
    prevent_initial_call=True  # 防止页面加载时触发回调
)
def redirect_to_url(clickData):
    # 根据点击的 data point 生成唯一URL（这里示例用固定URL，你可以根据clickData动态生成）
    if clickData is not None:
        # 示例：从clickData中提取数据点信息，生成对应URL
        point_data = clickData['points'][0]
        # 比如根据x轴值生成URL，这里替换成你的逻辑
        unique_url = f"https://www.example.com?fruit={point_data['x']}"
        return unique_url
    # 如果没有点击事件，返回空或当前URL
    return dash.no_update

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

关键说明： #

• dcc.Location的refresh=True参数：如果跳转的是外部URL，需要开启这个参数强制页面刷新跳转；如果是Dash应用内部路由，可以设为False实现无刷新跳转。
• prevent_initial_call=True：避免页面加载时自动触发回调，只有点击数据点时才执行跳转逻辑。
• 动态生成URL：你可以通过clickData['points'][0]获取点击的数据点详情（比如x/y值、分组信息等），根据这些信息拼接出唯一的目标URL。

备选方案（用JS触发跳转） #

如果不想用dcc.Location，也可以通过动态生成隐藏的链接并自动点击来实现，修改回调返回一个包含JS脚本的html.Script组件：

@app.callback(
    Output('dummy-div', 'children'),
    Input('example-graph', 'clickData'),
    prevent_initial_call=True
)
def redirect_to_url(clickData):
    if clickData is not None:
        url = f"https://www.example.com?data={clickData['points'][0]['x']}"
        return html.Script(f"window.location.href = '{url}';")
    return dash.no_update

这种方式需要保留布局中的dummy-div，但相比dcc.Location不够原生优雅，推荐优先使用第一种方案。

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