Plotly/Dash 以流畅的动画显示实时数据

本文介绍了Plotly/Dash 以流畅的动画显示实时数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我们正在尝试在 plotly-dash 中生成一个实时仪表板，在生成时显示实时数据.我们通常遵循此处的指南(

请记住，只有当数据已经存在于客户端时才可能进行客户端更新，即需要另一种机制来从服务器获取数据.一个可能的数据流可能是

使用缓慢的 Interval 组件(例如 2 秒)触发(正常)回调，该回调从源获取数据块并将其放置在 Store 组件中

使用快速 Interval 组件(例如 25 毫秒)触发客户端回调，该回调将数据从 Store 组件流式传输到 Graph组件

We are trying to produce a real-time dashboard in plotly-dash that displays live data as it is produced. We are generally following the guidance here (dash.plotly/live-updates).

We have a callback that gathers a chunk of new data points from the source approximately every second and then appends the data to the graph.

When we do this the update to the graph is choppy because we are generating a new graph object on the callback every second. We want the graph to flow smoothly, even if that means we're a second or two behind the live data.

We are looking at animations (plotly/python/animations/) but it's not clear how we might apply an animation to a live stream of data being appended to a graph.

解决方案

Updating traces of a Graph component without generating a new graph object can be achieved via the extendData property. Here is a small example that appends data each second,

import dash import dash_html_components as html import dash_core_components as dcc import numpy as np from dash.dependencies import Input, Output # Example data (a circle). resolution = 20 t = np.linspace(0, np.pi * 2, resolution) x, y = np.cos(t), np.sin(t) # Example app. figure = dict(data=[{'x': [], 'y': []}], layout=dict(xaxis=dict(range=[-1, 1]), yaxis=dict(range=[-1, 1]))) app = dash.Dash(__name__, update_title=None) # remove "Updating..." from title app.layout = html.Div([dcc.Graph(id='graph', figure=figure), dcc.Interval(id="interval")]) @app.callback(Output('graph', 'extendData'), [Input('interval', 'n_intervals')]) def update_data(n_intervals): index = n_intervals % resolution # tuple is (dict of new data, target trace index, number of points to keep) return dict(x=[[x[index]]], y=[[y[index]]]), [0], 10 if __name__ == '__main__': app.run_server()

Depending of the network connection between client and server (at each update, a request is exchanged between client and server), this approach works up to a refresh rate of around 1s.

If you need a higher refresh rate, i would suggest doing the graph update using a client side callback. Adopting the previous example, the code would be along the lines of

import dash import dash_html_components as html import dash_core_components as dcc import numpy as np from dash.dependencies import Input, Output, State # Example data (a circle). resolution = 1000 t = np.linspace(0, np.pi * 2, resolution) x, y = np.cos(t), np.sin(t) # Example app. figure = dict(data=[{'x': [], 'y': []}], layout=dict(xaxis=dict(range=[-1, 1]), yaxis=dict(range=[-1, 1]))) app = dash.Dash(__name__, update_title=None) # remove "Updating..." from title app.layout = html.Div([ dcc.Graph(id='graph', figure=dict(figure)), dcc.Interval(id="interval", interval=25), dcc.Store(id='offset', data=0), dcc.Store(id='store', data=dict(x=x, y=y, resolution=resolution)), ]) app.clientside_callback( """ function (n_intervals, data, offset) { offset = offset % data.x.length; const end = Math.min((offset + 10), data.x.length); return [[{x: [data.x.slice(offset, end)], y: [data.y.slice(offset, end)]}, [0], 500], end] } """, [Output('graph', 'extendData'), Output('offset', 'data')], [Input('interval', 'n_intervals')], [State('store', 'data'), State('offset', 'data')] ) if __name__ == '__main__': app.run_server()

Client side updates should be fast enough to achieve a smooth update. The gif below shows the above example running with 25 ms refresh rate,

Keep in mind that a client side update is only possible if the data is already present client side, i.e. another mechanism is needed to fetch the data from the server. A possible data flow could be

Use a slow Interval component (e.g. 2 s) to trigger a (normal) callback that fetches a chunk of data from the source and places it in a Store component

Use a fast Interval component (e.g. 25 ms) to trigger a client side callback that streams data from the Store component to the Graph component