如何在Python的Plotly Dash图表中获取点击事件的坐标数据

Plotly Dash 原生的clickData、hoverData确实仅支持返回已有数据点的坐标，没有直接提供非数据点的点击坐标获取能力，有两种成熟的变通方案可以实现需求：

方案1：添加透明全覆盖散点层（纯Python实现，无需写JS） #

原理是在你的图表最上层加一个和画布范围完全一致的高密度透明散点层，所有点击都会落在这个散点层的点上，就能拿到任意位置的坐标：

• 先计算你当前图表的x轴、y轴的取值范围，比如x范围是[x_min, x_max]，y范围是[y_min, y_max]
• 生成足够密集的网格点，精度可以根据你的需求调整，普通场景下100*100的网格就足够使用
• 把这个散点trace添加到图里，设置marker=dict(opacity=0)、hoverinfo='none'，确保用户看不到也不影响原有图表的悬浮效果
• 之后正常用clickData就能拿到所有位置的点击坐标，只要过滤trace索引，只取这个透明散点层的点击数据即可

示例代码：

import dash
from dash import dcc, html, Input, Output, State
import plotly.graph_objects as go
import numpy as np

app = dash.Dash(__name__)

# 生成透明层的网格坐标，这里以x、y轴范围都是0-10为例，可自行替换为你的图表范围
x_range = np.linspace(0, 10, 100)
y_range = np.linspace(0, 10, 100)
xx, yy = np.meshgrid(x_range, y_range)
x_flat = xx.flatten()
y_flat = yy.flatten()

app.layout = html.Div([
    dcc.Graph(id='graph', figure=go.Figure([
        # 这里替换为你自己的原有图表内容，示例为普通折线
        go.Scatter(x=[1,2,3], y=[4,1,2], mode='lines', name='原有数据'),
        # 透明散点层，放在所有trace最后确保在最上层
        go.Scatter(
            x=x_flat, y=y_flat, mode='markers',
            marker=dict(opacity=0, size=5), # size调大一点可以避免点击漏识别
            hoverinfo='none', showlegend=False, name='透明点击层'
        )
    ])),
])

# 存储两次点击的坐标
click_points = []

@app.callback(
    Output('graph', 'figure'),
    Input('graph', 'clickData'),
    State('graph', 'figure'),
    prevent_initial_call=True
)
def draw_line(click_data, fig):
    global click_points
    point = click_data['points'][0]
    # 只取透明层的点击数据，这里透明层是第二个trace，索引为1
    if point['curveNumber'] == 1:
        click_points.append((point['x'], point['y']))
        # 集齐两个点就绘制连线
        if len(click_points) == 2:
            fig['data'].append(go.Scatter(
                x=[click_points[0][0], click_points[1][0]],
                y=[click_points[0][1], click_points[1][1]],
                mode='lines', line=dict(color='red'), showlegend=False
            ))
            # 清空坐标存储等待下一组点击
            click_points = []
    return fig

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

方案2：自定义JS客户端回调（精度更高，无性能损耗） #

如果对坐标精度要求很高，不想生成大量散点占用内存，可以用Dash的客户端回调绑定Plotly图表的原生点击事件，直接获取点击位置的坐标：

• 给dcc.Graph设置唯一id，用dash.clientside_callback写JS逻辑
• 在JS代码中直接读取点击事件的x轴、y轴原始坐标值，可以选择直接在前端绘图，或者传回后端处理

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