如何让Plotly热力图悬浮提示框颜色与悬停像素颜色一致？

问题背景 #

使用Plotly绘制大尺寸热力图时，通过customdata传递颜色数组会导致生成的HTML体积翻倍（可达100-200MB），希望直接利用Plotly已计算好的颜色，无需额外传递数据来实现悬浮提示中颜色标记的匹配。

解决方案：前端JS动态获取颜色 #

Plotly本身没有直接的%{color}模板变量，但可以通过监听悬浮事件，在前端动态提取Plotly已计算好的单元格颜色，无需嵌入额外的颜色数据。

1. 基础热力图代码（无customdata）

import numpy as np
import plotly.graph_objects as go
import plotly.colors as pc

# 生成示例数据
size = 5
img = np.random.random((size, size+2))
cmap = pc.sequential.Jet

# 绘制热力图，hovertemplate中预留颜色标记的占位元素
fig = go.Figure(
    go.Heatmap(
        z=img,
        colorscale=cmap,
        hovertemplate='Value %{z} with color <span class="color-marker">⬤</span>',
        name=''
    )
)

2. 注入自定义JS脚本（生成HTML时）

通过write_html方法添加自定义JavaScript，监听Plotly的悬浮事件，动态修改标记颜色：

custom_js = """
<script>
document.addEventListener('DOMContentLoaded', function() {
    const plotDiv = document.getElementById('{plot_id}');
    // 监听悬浮事件
    plotDiv.addEventListener('plotly_hover', (event) => {
        const points = event.detail.points;
        if (!points.length) return;
        const targetPoint = points[0];
        // 获取Plotly已计算好的单元格颜色
        const cellColor = targetPoint.fullData.marker.color[targetPoint.pointNumber];
        // 修改悬浮提示中的颜色标记
        const hoverText = plotDiv.querySelector('.hovertext');
        if (hoverText) {
            const marker = hoverText.querySelector('.color-marker');
            if (marker) marker.style.color = cellColor;
        }
    });
    // 鼠标移出时重置标记颜色（可选）
    plotDiv.addEventListener('plotly_unhover', () => {
        const hoverText = plotDiv.querySelector('.hovertext');
        if (hoverText) {
            const marker = hoverText.querySelector('.color-marker');
            if (marker) marker.style.color = '';
        }
    });
});
</script>
"""

# 生成HTML文件，替换占位的plot_id
fig.write_html("heatmap.html", include_plotlyjs='cdn', post_script=custom_js.format(plot_id=fig.layout.id))

核心原理 #

• Plotly渲染热力图时，会自动为每个单元格计算对应的颜色值，并存储在fullData.marker.color数组中，通过悬浮事件可以直接提取该值。
• 这种方法完全避免了嵌入庞大的颜色数组，不会增加HTML文件体积，仅通过少量JS代码实现需求。
• 若使用Dash框架，可通过监听dcc.Graph的hoverData属性，在Python回调中提取颜色值并更新悬浮提示内容，逻辑一致。

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