Question

我目前正在尝试绘制实时更新的密度热图。这是我定义的图形和应用程序布局。

figure = dict({
    "data" : [{"type": 'heatmap',
             "x" : [],
             "y" : []}],
    "layout" : {"xaxis" : [0,255], "yaxis" : [0,255]}
})
app.layout = html.Div(children=[
    html.Div([
        html.H1(children='Sensor Data'),

        html.Div(children='''
            3d Representation.
        '''),

        dcc.Graph(
            id='live-update-graph',
            figure = figure
        ),  
    ]),    
    dcc.Interval(
        id = 'clientside-time',
        interval = 10,
        n_intervals = 0
    )
])

这是每次更新数据的回调函数。

phase = [i for i in range(256)]
phases = []
cycle = []
phases = phase *5

cycle = [[i] *256 for i in range(5)]
cycle = list(chain.from_iterable(cycle))    

@app.callback(
    Output('live-update-graph', 'extendData'),
    Input('clientside-time', 'n_intervals')
)
def update_store_data(time):
    df = DataFrame(storage[256*time : (time+5) * 256], columns = ['Intensity'] )
    df['Phase'] = phases

    print(time)
    return dict(x = [df['Phase']], y = [df['Intensity']])
if __name__ == '__main__':
    app.run_server(debug=True)

在我的理论中，列表切片应该从上面初始化的存储列表中获取不同的部分。但是，在运行此代码后，我没有看到任何图形。这是随时间变化更新数据的正确方法吗？

Answer 1

根据您展示的代码进行试验，我认为图表显示不正确与您选择的 interval 值有关。

当您将 interval 设置为 10 时，表示将每 10 毫秒 (source) 触发一次回调，时间很短。

当我使用一些虚拟数据测试您的代码时，增加 interval 会使数据出现在图表中。

更新

此外，您使用的是 heatmap 类型的图形，但在您的回调中，您只返回 x 和 y 的值。所以图表不会以任何方式显示，因为没有设置图表的所有必要尺寸。

顺便说一下，如果您对 1 秒的刷新率不满意，也可以使用 client side callback。另请参阅这个不错的答案 here 以了解有关 extendData 和客户端回调的更多信息。

如何随着时间的变化更新图形的数据值

1 个答案: