Plotly动画热力图仅首帧显示后续消失的修复咨询

核心问题分析 #

你的代码中，动画更新时设置了redraw=False，这会阻止Plotly完全重绘图形，导致热力图这类需要动态更新数据的trace无法被正确刷新；同时，热力图trace没有唯一标识，Plotly在帧切换时无法匹配并更新对应的热力图元素。

修复步骤 #

1. 修改动画更新的redraw参数为True #

将所有动画控制按钮和滑块中的redraw设置为True，确保每帧都能完全重绘所有图形元素：

• 更新播放按钮参数：

{
    "args": [None, {"frame": {"duration": 100, "redraw": True},
                "fromcurrent": True, "transition": {"duration": 0}}],
    "label": "Play",
    "method": "animate"
}

• 更新暂停按钮参数：

{
    "args": [[None], {"frame": {"duration": 0, "redraw": True},
                      "mode": "immediate",
                      "transition": {"duration": 0}}],
    "label": "Pause",
    "method": "animate"
}

• 更新滑块步骤参数：

slider_step = {"args": [
    [frameId],
    {"frame": {"duration": 100, "redraw": True},
     "mode": "immediate",
     "transition": {"duration": 0}}
],
    "label": str(frameId),
    "method": "animate"}

2. 给热力图trace添加唯一名称 #

为每个热力图trace设置固定的name属性，让Plotly在帧切换时能准确识别并更新对应的热力图：

在两处创建heatmap_trace的代码中添加name参数：

heatmap_trace = go.Heatmap(
    x=x_coords,
    y=y_coords,
    z=values,
    connectgaps=True,
    hoverinfo="x+y+z",
    colorscale=[[0, 'rgba(0,0,255, 0)'], [1, 'rgba(255,0,0, 1)']],
    name=f"heatmap_{team}"  # 添加唯一标识名称
)

3. 保留原有帧初始化逻辑 #

你的代码中每个帧的data已经包含完整的热力图trace，无需修改fig = go.Figure(...)部分，保持原样即可：

fig = go.Figure(
    data=frames[0]["data"],
    layout= layout,
    frames=frames[1:]
) 

原理说明 #

• redraw=True：强制Plotly在每帧切换时重新绘制所有图形元素，确保热力图的新数据被正确渲染。
• 唯一name属性：让Plotly能够关联不同帧中同一类型的热力图trace，避免因trace不匹配导致的消失问题。

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