使用Python的Plotly制作不带“播放”按钮的动画图表

Question

我对Python和Dash都很新，正在尝试制作一个动画图表。我有一个散点图对象，并且它是可动画的。它可以通过点击“播放”按钮来工作，就像许多示例中显示的那样。但是是否有一种方法可以在没有按钮的情况下开始动画，例如某些自动播放属性？下面是我的图表示例：

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px
import plotly.graph_objs as go

df = pd.DataFrame(index=range(0,49),columns=['x','y'])
df['x']=['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30','09:00', '09:30',
                                          '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30','19:00', '19:30',
                                          '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30', '24:00']
df['y']=[396, 365, 317, 415, 495, 353, 493, 413, 472, 335, 305, 465, 425, 401, 466, 476, 400, 473, 365, 406, 345, 439, 325, 367, 445, 478, 406, 469, 384, 468, 370, 328, 445, 376, 355, 377, 
                                          361, 324, 426, 413, 454, 479, 324, 498, 386, 438, 330, 309, 424]

fig1Slide1 = go.Figure(data=[go.Scatter(x=df['x'][:0], 
                                       y=df['y'][:0],
                                       mode='lines',
                                       line = dict(color='rgb(214,40,40)',width=1),
                                       fill='tozeroy',
                                       fillcolor='rgba(236,156,156,0.5)')])
fig1Slide1.update(frames=[go.Frame(data=[
            go.Scatter(x=df['x'][:k], 
                       y=df['y'][:k])])for k in range(0,49)])
fig1Slide1.update_layout(updatemenus=[dict(type="buttons", buttons=[dict(label="Play",method="animate",args=[None, {"frame": {"duration": 30}}])])] )

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(figure=fig1Slide1)
    ])

if __name__ == '__main__':
    app.run_server(debug=True)

- Rezer

---

你有没有在文档中检查是否有“autoplay”或“autostart”选项？ - furas

嗨Rezer：考虑提供可重现的示例！我猜你在片段顶部没有复制导入。但是，当执行时，什么也不会发生。您能否完善示例以使其可运行？ - smed

如果您创建一个最小工作代码，我们就可以简单地复制并运行它，那将会更容易。 - furas

我更新了我的代码示例，以便在Dash中运行它。 - Rezer

同时，我创建了可工作的代码 - 我只发现 dcc.Graph(..., animate=True, animation_options={"frame": {"duration": 30}}) 不会出错，但它也不会在我的电脑上启动动画。 - furas

谢谢您的建议，但它并没有启动动画。 - Rezer

Answer 1

你可以像这样做：

app.layout = html.Div([
    dcc.Graph(id="my-graph", figure=fig1Slide1),
    dcc.Interval(id='interval', interval=1000, max_intervals=1),
    html.Div(id="dummy-output")
])

app.clientside_callback(
    """
    function(figure) {
        Plotly.animate(document.querySelector('.js-plotly-plot'))
    }
    """,
    Output('dummy-output', 'children'),
    Input('interval', 'n_intervals'),
    prevent_initial_call=True
)

这个想法是使用客户端回调，这样我们就可以在图表上调用plotlyjs的animate函数。由于您已经在图形上设置了帧，因此我们不需要将它们传递给animate。我们只需要传递一个dom元素或id，指向该图形即可。

https://plotly.com/javascript/animations/

使用 max_intervals=1 的时间间隔作为 Input，以便在一秒钟后仅运行一次回调函数（interval=1000）。

https://dash.plotly.com/dash-core-components/interval

- 5eb