Plotly热力图hover提示出现NaN值的原因及规避方法

你编写的Plotly热力图代码如下：

import plotly.graph_objects as go

X = [0.001872507, 0.001873447, 0.001874379, 0.001875308, 0.001876231, 0.001877156, 0.001878074, 0.001878988, 0.001879891, 0.00188079]
Y = [15.87916667, 15.8375, 15.90277778, 15.92638889, 16.0875, 16.05833333, 16.11527778, 16.04166667, 16.1125, 16.09583333]
error = [-0.442834483, -0.404160852, -0.361559069, -0.319924963, -0.27351035, -0.222068364, -0.16524067, -0.194427625, -0.173130923, -0.13978894]

fig = go.Figure(data=go.Heatmap(
        x=X,
        y=Y,
        z=error,
        colorscale='Viridis'))

fig.update_layout(
    title='Heatmap',
    xaxis_title='X',
    yaxis_title='Y'
)

fig.show()

运行后悬停部分点时，提示信息出现类似X:0.001873447 y: 16.04167,x:NaN的内容，以下是问题原因和解决方法：

问题原因 #

• Plotly的Heatmap组件默认要求z参数是二维数组（矩阵形式），用来匹配X-Y网格中每个交叉点的数值。
• 你传入的z是一维数组，Plotly会自动尝试将其适配为网格数据，但X和Y的长度都是10，默认会生成10×10的网格，一维的z只有10个值，无法填满整个网格，剩余交叉点就会出现NaN值。
• 悬停时鼠标落在没有对应z值的网格区域，就会显示NaN，同时可能出现重复的X/Y标签。

解决方法 #

根据你的数据场景，有两种可行的解决方式：

方式一：改用散点图+颜色映射（离散点场景） #

如果X、Y、error是一组离散的点数据，而非规则网格数据，更适合用Scatter组件实现颜色映射效果：

import plotly.graph_objects as go

X = [0.001872507, 0.001873447, 0.001874379, 0.001875308, 0.001876231, 0.001877156, 0.001878074, 0.001878988, 0.001879891, 0.00188079]
Y = [15.87916667, 15.8375, 15.90277778, 15.92638889, 16.0875, 16.05833333, 16.11527778, 16.04166667, 16.1125, 16.09583333]
error = [-0.442834483, -0.404160852, -0.361559069, -0.319924963, -0.27351035, -0.222068364, -0.16524067, -0.194427625, -0.173130923, -0.13978894]

fig = go.Figure(data=go.Scatter(
    x=X,
    y=Y,
    mode='markers',
    marker=dict(
        size=12,
        color=error,
        colorscale='Viridis',
        showscale=True
    ),
    hovertemplate='X: %{x}<br>Y: %{y}<br>Error: %{marker.color}<extra></extra>'
))

fig.update_layout(
    title='Scatter with Color Mapping',
    xaxis_title='X',
    yaxis_title='Y'
)

fig.show()

方式二：将z转换为二维数组（规则网格场景） #

如果X和Y是规则网格的轴数据，需要将error整理为二维数组，每个元素对应X[i]和Y[j]交叉点的数值：

import plotly.graph_objects as go
import numpy as np

X = [0.001872507, 0.001873447, 0.001874379, 0.001875308, 0.001876231, 0.001877156, 0.001878074, 0.001878988, 0.001879891, 0.00188079]
Y = [15.87916667, 15.8375, 15.90277778, 15.92638889, 16.0875, 16.05833333, 16.11527778, 16.04166667, 16.1125, 16.09583333]
# 根据实际网格结构调整reshape的参数，示例转为1×10的二维数组
error = np.array(error).reshape(1, 10)

fig = go.Figure(data=go.Heatmap(
        x=X,
        y=Y,
        z=error,
        colorscale='Viridis',
        hovertemplate='X: %{x}<br>Y: %{y}<br>Error: %{z}<extra></extra>'
))

fig.update_layout(
    title='Heatmap',
    xaxis_title='X',
    yaxis_title='Y'
)

fig.show()

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