我们正在尝试在 plotly-dash 中生成一个实时仪表板,在生成时显示实时数据.我们通常遵循此处的指南(
请记住,只有当数据已经存在于客户端时才可能进行客户端更新,即需要另一种机制来从服务器获取数据.一个可能的数据流可能是
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
更多推荐
Plotly/Dash 以流畅的动画显示实时数据
发布评论