如何更新plot plot，并保持UI设置?

Question

下面的代码创建了两个子图，并在浏览器窗口中每秒更新一次。

我可以在plot中缩放和隐藏一些线，但每秒钟所有数据都会更新，并将缩放和所有线可见性设置为默认

如何在更新时保持缩放和选定线的设置?

import datetime
import random
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from plotly.subplots import make_subplots
# https://dash.plotly.com/live-updates
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
html.Div([
html.H4('Two random plots'),
dcc.Graph(id='live-update-graph'),
dcc.Interval(
id='interval-component',
interval=1 * 1000,  # in milliseconds
n_intervals=0
)
])
)
DATA = {
'time': [],
'val0': [],
'val1_1': [],
'val1_2': []
}

def update_data():
DATA['val0'].append(random.randint(0, 50))
DATA['val1_1'].append(random.randint(0, 50))
DATA['val1_2'].append(random.randint(0, 50))
DATA['time'].append(datetime.datetime.now())

@app.callback(Output('live-update-graph', 'figure'),
Input('interval-component', 'n_intervals'))
def update_graph_live(n):
update_data()
# Create the graph with subplots
fig = make_subplots(rows=2, cols=1, vertical_spacing=0.2)
fig['layout']['margin'] = {'l': 30, 'r': 10, 'b': 30, 't': 10}
fig['layout']['legend'] = {'x': 0, 'y': 1, 'xanchor': 'left'}
fig.append_trace({
'x': DATA['time'],
'y': DATA['val0'],
'name': 'val 0',
'mode': 'lines+markers',
'type': 'scatter'
}, 1, 1)
fig.append_trace({
'x': DATA['time'],
'y': DATA['val1_1'],
'text': DATA['time'],
'name': 'val 1.1',
'mode': 'lines+markers',
'type': 'scatter'
}, 2, 1)
fig.append_trace({
'x': DATA['time'],
'y': DATA['val1_2'],
'text': DATA['time'],
'name': 'val 1.2',
'mode': 'lines+markers',
'type': 'scatter'
}, 2, 1)
return fig

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

Answer 1

自2018年11月以来，Plotly社区论坛上发布了一个解决方案。dcc.Graph的figure性质的layout性质具有uirevision性质，对此文章说:

uirevision是奇迹发生的地方。这个键由dcc.Graph内部跟踪，当它从一个更新到下一个更新时，它重置所有用户驱动的交互(如缩放，平移，点击图例项目)。如果它保持不变，那么用户驱动的UI状态不会改变。

所以，如果你永远不想重置缩放设置，无论底层数据有多大变化，只需将uirevision设置为常量，如下所示:

fig['layout']['uirevision'] = 'some-constant'

在更新函数中返回数字之前。

还有更多:

也有需要更多控制的情况。假设可以分别更改绘图的x和y数据。也许x一直是时间，但y可以在价格和量之间变化。您可能希望在重置y变焦时保留x变焦。有很多uirevision属性，通常都继承自layout.uirevision，但如果需要，您可以单独设置它们。在本例中，设置常量xaxis.uirevision = 'time'，但让yaxis.revision在'price'和'volume'之间变化。确保仍然设置layout.uirevision以保留其他项目，如跟踪可见性和模式栏按钮!