Plotly叠加热力图hover时统一显示所有z值的实现方法咨询

嘿，刚好我之前也折腾过Plotly多热力图的hover统一显示问题，完全懂你不想写一堆自定义数据框的心情！其实不用那么繁琐，咱们可以通过customdata配合hovertemplate来实现，比你说的自定义数据框简单多了，而且效果很稳。

核心思路是：

• 确保三个热力图的x、y轴完全对齐（这是基础，不然hover时对应不上位置）
• 把另外两个热力图的z值打包到主热力图的customdata里
• 自定义hovertemplate来调用customdata里的额外z值，同时隐藏其他热力图的hover提示，避免重复

直接上可运行的代码示例：

import plotly.graph_objects as go
import numpy as np

# 生成测试数据，确保x、y维度完全一致
x = np.linspace(0, 10, 5)
y = np.linspace(0, 10, 5)
z1 = np.random.rand(5,5)  # 第一个热力图的z值
z2 = np.random.rand(5,5)  # 第二个热力图的z值
z3 = np.random.rand(5,5)  # 第三个热力图的z值

fig = go.Figure()

# 添加主热力图：包含z1，同时把z2、z3打包进customdata
fig.add_trace(go.Heatmap(
    x=x, y=y, z=z1,
    # 把z2和z3合并成三维数组，每个位置对应(x,y)点的另外两个z值
    customdata=np.stack([z2, z3], axis=-1),
    # 自定义hover模板，显示所有三个z值，<extra></extra>用来隐藏默认的trace名称
    hovertemplate='X: %{x}<br>Y: %{y}<br>热力图1: %{z:.2f}<br>热力图2: %{customdata[0]:.2f}<br>热力图3: %{customdata[1]:.2f}<extra></extra>',
    name='热力图1'
))

# 添加另外两个热力图，设置hoverinfo='skip'，避免它们单独显示hover提示
fig.add_trace(go.Heatmap(
    x=x, y=y, z=z2,
    hoverinfo='skip',
    name='热力图2'
))

fig.add_trace(go.Heatmap(
    x=x, y=y, z=z3,
    hoverinfo='skip',
    name='热力图3'
))

# 设置hovermode为closest，确保鼠标精准对应到(x,y)点
fig.update_layout(
    hovermode='closest',
    title='多热力图统一Hover显示'
)

fig.show()

为什么这个方法好用？ #

1. 不用额外创建复杂的数据框，直接用numpy的stack方法就能把多个z矩阵打包进customdata，代码量极少
2. 只保留一个热力图的hover提示，避免多个hover框重叠的混乱情况
3. 完全自定义显示内容，你可以调整hovertemplate里的文字格式、小数位数，甚至添加额外说明

如果不想隐藏其他热力图的hover，也可以给三个热力图都设置相同的hovertemplate，然后把hovermode改成'x unified'或'y unified'，不过这样会出现重复的X/Y行，不如上面的方法清爽。

另外要注意：必须保证三个热力图的x、y轴数据完全一致，包括顺序、维度、数值范围，否则customdata的位置会和(x,y)点不匹配，显示错误的z值。

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