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

Posted 2023-03-22

【中文标题】如何将时间序列数据中的缩放级别作为 Dash 中的回调输入

【英文标题】：How to get zoom level in time series data as callback input in Dash

【发布时间】：2019-10-29 20:30:43

【问题描述】：

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

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

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

【参考方案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()

【讨论】：

不幸的是，您的解决方案在回调函数中覆盖了图形的完整布局。我在***.com/a/64891612/179014 写了一个改进的答案。

【参考方案2】：

这是基于@Sachin Dev Sharma 的回答的回调改进版本：

@app.callback([Output('graph2', 'figure')],
         [Input('graph', 'relayoutData')], # this triggers the event
         [State('graph2', 'figure')])
def zoom_event(relayout_data, *figures):
    outputs = []
    for fig in figures:
        try:
            fig['layout']["xaxis"]["range"] = [relayout_data['xaxis.range[0]'], relayout_data['xaxis.range[1]']]
            fig['layout']["xaxis"]["autorange"] = False
        except (KeyError, TypeError):
            fig['layout']["xaxis"]["autorange"] = True

        outputs.append(fig)

    return outputs

这里的好处是，我们不会在回调中覆盖图形的完整布局。我们只覆盖xaxis.range 和xaxis.autorange 属性。此解决方案还允许通过接受多个图形参数来设置多个输出图形的缩放（请参阅*figures）。

【参考方案3】：

Dash 文档对此here 有一个答案。

relayoutData

当用户缩放或平移绘图或其他布局级编辑时发生的最新重新布局事件的数据。具有描述所做更改的 : 形式。只读。

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

【讨论】：

谢谢，了解relayoutData 很有帮助。我确实认为有几种方法可以获取该只读数据，并使用它来更新另一个图表。是通过数据，还是通过图表的轴属性？

如果有，那不是我熟悉的东西。