如何在Dash应用中获取Plotly Heatmap的点击单元格数据？

你混淆了组件层级：clickData是**dcc.Graph组件的属性**，而非go.Heatmap图表对象的属性。不管你在dcc.Graph里渲染的是热力图、折线图还是散点图，都可以通过dcc.Graph的clickData捕获点击事件，热力图的点击数据会包含你需要的单元格信息。

实现步骤与代码示例 #

以下是一个完整的Dash应用示例，点击热力图单元格后，右侧文本框会实时显示该单元格的坐标和对应数值：

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

# 生成测试用热力图数据
np.random.seed(42)
heatmap_data = np.random.rand(5, 5)
x_labels = [f"X{i+1}" for i in range(5)]
y_labels = [f"Y{i+1}" for i in range(5)]

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        dcc.Graph(
            id='heatmap-graph',
            figure=go.Figure(
                data=go.Heatmap(
                    z=heatmap_data,
                    x=x_labels,
                    y=y_labels,
                    hoverongaps=False
                )
            )
        )
    ], style={'width': '60%', 'display': 'inline-block'}),
    html.Div([
        html.H3("点击单元格详情"),
        html.Div(id='cell-info', style={'fontSize': 18, 'marginTop': 20})
    ], style={'width': '35%', 'display': 'inline-block', 'verticalAlign': 'top'})
])

@app.callback(
    Output('cell-info', 'children'),
    Input('heatmap-graph', 'clickData')
)
def update_cell_info(click_data):
    if not click_data:
        return "点击热力图中的任意单元格查看详情"
    
    # 解析点击数据中的单元格信息
    point_data = click_data['points'][0]
    x_val = point_data['x']
    y_val = point_data['y']
    z_val = point_data['z']
    
    return f"坐标：({x_val}, {y_val})，数值：{z_val:.4f}"

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

解析clickData结构 #

热力图的clickData是一个字典，核心数据存放在points列表的第一个元素中，关键字段包括：

• x：点击单元格的横轴标签/数值
• y：点击单元格的纵轴标签/数值
• z：该单元格对应的热力值
• xaxis/yaxis：坐标轴的额外元数据（可选）

扩展说明 #

如果需要用点击数据更新其他图表（比如柱状图、折线图），只需要修改回调的输出目标和返回内容即可——逻辑完全一致：从clickData提取单元格信息，再基于该信息生成新的图表对象。

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