Plotly动画无法渲染播放问题求助（含代码与数据）

问题描述 #

已查阅大量资料并在Jupyter Notebooks、Google Colab测试代码，均未成功。现有约100个数据文件，覆盖数千个间隔为10的波长，需将导数数据在Y轴做动画展示以对比不同组特征；无动画时适合用3个箱线图呈现。尝试用Plotly散点图动画实现：X轴为分组编号1、2、3，Y轴为随波长变化的导数值，按Wavelength切换动画。推测问题出在DataFrame配置，但无法定位。

DataFrame（"SlopeInteractive"）结构 #

注意：展示的列名与实际数据字段不匹配（列名标注4个，但每行有5个字段），实际应为5列，修正后结构如下：

Sample       Wavelength  X   Type  Value
bir1jb740    1850       3   Y     -0.00001
bir1bu017    1850       3   Y      0.00002
bir1bu039    1850       3   Y      0.00001
bir1bu040    1850       3   Y     -0.00005
bir1wf015    1850       3   Y      0.00002
...          ...        ... ...    ...
bir1jbg69a   8000       1   S     -0.00017
maze10       8000       2   T     -0.00146
maze57       8000       1   S      0.00041
maze15       8000       1   S     -0.00069
maze16       8000       1   S     -0.00078
108416 rows × 5 columns

现有代码 #

import plotly.express as px
import plotly

fig = go.Figure()

px.scatter(SlopeInteractive, x = "Type", y = "Value", color = "X", animation_frame = "Wavelength", animation_group="Type", hover_name = SlopeInteractive.index, category_orders = {"Wavelength" : wavelengthList})


fig.update_layout(updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None, {"frame": {"duration": 200, "redraw": False}} ])])],
            title = "Animation of groups Derivative change from 1850-8000nm", 
            xaxis_title = "SHOULDERS                 Doublets                 NONSHOULDER SINGLETS", 
            yaxis_title = "Derivative values at X wavelength")


frames=[go.Frame(data=[go.Scatter(x=[1, 2], y=[1, 2])]),
            go.Frame(data=[go.Scatter(x=[1, 4], y=[1, 4])]),
            go.Frame(data=[go.Scatter(x=[3, 4], y=[3, 4])],
                     layout=go.Layout(title_text="End Title"))]

fig.show()

输出问题 #

运行约10秒后仅显示带标题和轴标签的空白图，自动标签与数据集不符，代码未正确读取输入数据。

解决思路 #

1. 修正DataFrame列名与数据匹配 #

首先确保DataFrame的列名正确对应数据字段，如上述修正后的Sample, Wavelength, X, Type, Value，否则Plotly无法正确映射字段。

2. 修复代码核心逻辑错误 #

• 赋值Plotly Express生成的图到fig：原代码新建空go.Figure()后，调用px.scatter但未将结果赋值给fig，导致后续操作的是空图。需改为：

  fig = px.scatter(...)
  

• 修正X轴映射字段：需求中X轴是分组编号1、2、3（对应DataFrame的X列），原代码错误设置x="Type"，需改为x="X"。
• 修正animation_group参数：animation_group需指定每个动画中追踪的唯一元素（即每个样本），应改为animation_group="Sample"，而非Type。
• 删除手动添加的frames：原代码手动添加的空frames会覆盖Plotly Express自动生成的波长帧，需删除该部分代码。

3. 优化动画配置 #

• 确保wavelengthList是按从小到大排序的波长列表，保证动画按波长顺序播放。
• 可调整动画参数，比如将redraw设为True（默认）以确保每一帧正确渲染，或根据数据量调整duration。
• 将X轴设置为类别型，避免自动转为数值轴：

  fig.update_xaxes(type='category')
  

修正后的完整代码示例 #

import plotly.express as px

# 先确保DataFrame列名正确，比如：
# SlopeInteractive.columns = ["Sample", "Wavelength", "X", "Type", "Value"]

fig = px.scatter(
    SlopeInteractive,
    x="X",  # 对应分组编号1、2、3
    y="Value",
    color="X",
    animation_frame="Wavelength",
    animation_group="Sample",  # 追踪每个样本在不同波长的数据
    hover_name="Sample",
    category_orders={"Wavelength": wavelengthList}
)

fig.update_layout(
    updatemenus=[dict(
        type="buttons",
        buttons=[dict(
            label="Play",
            method="animate",
            args=[None, {"frame": {"duration": 200, "redraw": True}}]
        )]
    )],
    title="Animation of groups Derivative change from 1850-8000nm",
    xaxis_title="SHOULDERS                 Doublets                 NONSHOULDER SINGLETS",
    yaxis_title="Derivative values at X wavelength"
)

fig.update_xaxes(type='category')  # 确保X轴按分组类别显示
fig.show()

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