Question

给出一个在Dash（绘图）仪表板上包含时间序列数据的折线图，当我放大并且x轴的分辨率（时间戳）改变时，如何捕获它作为另一个回调的输入？

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

请注意，情节A和情节B使用的数据集不同，且时间戳匹配。

Answer 1

示例代码，用于同步以虚线显示的缩放级别。

const path = require('path');
const express = require('express');
const app = express();
const port = 3000;

app.get('/test', async (req, res) => {
    res.json({message: 'pass!'});
});

app.use(express.static(path.join(__dirname, '../client/public')));

module.exports = app;

if (require.main === module) {
   app.listen(port);
}

Answer 2

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

relayoutData

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

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

Answer 3

这是基于@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）。

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

3 个答案: