如何获取时间序列数据的缩放级别作为 Dash 中的回调输入

Question

给定 Dash (Plotly) 仪表板中包含时间序列数据的折线图，当我放大并且 x 轴（时间戳）的分辨率发生变化时，如何将其捕获为另一个回调的输入？

我想要实现的是 plot-B 基于 plot-A 的缩放显示数据。当 plot-A 放大时，plot-B 自动跟随。

请注意， plot-A 和 plot-B 使用不同的数据集，具有匹配的时间戳。

Answer 1

用于在 plotly dash 中同步缩放级别的示例代码。

app=dash.Dash()

app.layout = html.Div([
                dcc.Graph(id='graph',figure=fig),
                html.Pre(id='relayout-data', style=styles['pre']),
                dcc.Graph(id='graph2', figure=fig)])

@app.callback(Output('relayout-data', 'children'),
              [Input('graph', 'relayoutData')])
def display_relayout_data(relayoutData):
    return json.dumps(relayoutData, indent=2)


@app.callback(Output('graph2', 'figure'),
             [Input('graph', 'relayoutData')], # this triggers the event
             [State('graph2', 'figure')])
def graph_event(select_data,  fig):
    try:
       fig['layout'] = {'xaxis':{'range':[select_data['xaxis.range[0]'],select_data['xaxis.range[1]']]}}
    except KeyError:
       fig['layout'] = {'xaxis':{'range':[zoomed out value]}}
return fig

app.run_server()

Answer 2

Dash 文档在这里给出了答案。

重新布局数据

来自最新重新布局事件的数据，该事件在用户缩放或平移绘图或其他布局级别编辑时发生。采用 {: } 形式描述所做的更改。只读。

不幸的是，作为只读道具，您将无法更新第二个图表以跟随第一个图表的缩放。