如何在Plotly Graph Objects动画最后一帧修改特定点颜色

核心思路 #

别在动画过程中加新图层，直接在原有60帧之后额外加一帧专门展示变色后的状态，让动画播放完自动停在这一帧，就能避免变色点提前显示的问题。

修改后的完整代码 #

import plotly.graph_objects as go
import random as rd

fig = go.Figure()
f = []
hours = range(0, 60)
pts = [rd.randrange(11, 100, 13) for i in range(1, 61)]

# 生成动画前60帧（保留原有逻辑，修正x/y长度匹配问题）
for i in range(1, 61):
    f.append(go.Frame(
        data=[go.Scatter(
            x=list(hours[:i]),
            y=list(pts[:i]),
            name="PRB Usage",
            line=dict(color="#1E90FF"),
            marker=dict(size=10, line=dict(width=3, color="yellow"))
        )]
    ))

# 生成第61帧：专门展示变色后的最终状态
# 先根据y值判断每个点的颜色
marker_colors = []
for y_val in pts:
    if y_val > 80 or y_val < 20:
        marker_colors.append("red")  # 替换成你想要的高亮颜色
    else:
        marker_colors.append("yellow")  # 保持原边框颜色

f.append(go.Frame(
    data=[go.Scatter(
        x=list(hours),
        y=pts,
        name="PRB Usage",
        line=dict(color="#1E90FF"),
        marker=dict(size=10, line=dict(width=3, color=marker_colors))
    )]
))

# 更新动画帧，并设置播放规则：自动播放、结束后停在最后一帧
fig.update(frames=f)
fig.update_layout(
    updatemenus=[dict(
        type="buttons",
        buttons=[dict(
            label="Play",
            method="animate",
            args=[None, dict(
                frame_duration=100,  # 每帧时长可按需调整
                transition_duration=50,
                fromcurrent=True,
                mode="immediate",
                redraw=True
            )]
        )]
    )]
)

# 设置初始状态为第一帧，避免一开始就显示全部数据
fig.update(data=f[0].data)

c = fig.to_html(config={'displayModeBar': False})

关键细节说明 #

• 修正了原代码中x和y数据长度不匹配的问题，保证每帧的坐标点数量一致。
• 新增的第61帧单独处理所有点的颜色，只有超出范围的点会被高亮。
• 通过布局参数设置动画播放逻辑，确保动画结束后停在变色状态的帧上。

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