Dash Python如何创建多个自动更新图表并配置对应标题与坐标轴标签

问题根因 #

1. 回调声明了4个图表作为输出对象，但函数仅返回1份图表配置，剩余3个图表无配置数据，所以无内容展示
2. 配置了4个重复的定时器组件，会导致回调被重复触发，引发数据冲突，所有图表同步更新的场景下仅需1个全局定时器即可
3. HTML结构错误，错误使用H1标签作为容器嵌套其他元素，会导致页面渲染异常

修正后代码 #

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import random
import plotly.graph_objs as go
from collections import deque

# 初始化数据队列
X = deque(maxlen = 20)
X.append(1)
# 后续拆分数据源可分别定义4组Y队列
Y = deque(maxlen = 20)
Y.append(1)

app = dash.Dash(__name__)
  
app.layout = html.Div(children=[
    html.H1(children='Graphs'),
    # 全局唯一定时器，控制所有图表同步更新
    dcc.Interval(
        id = 'graph-update',
        interval = 1000,
        n_intervals = 0
    ),
    html.Div([dcc.Graph(id = 'Battery Voltage', animate = True)]),
    html.Div([dcc.Graph(id = 'Signal', animate = True)]),
    html.Div([dcc.Graph(id = 'Health', animate = True)]),
    html.Div([dcc.Graph(id = 'Prognastics', animate = True)])
])

@app.callback(
    [Output('Battery Voltage', 'figure'),
     Output('Signal', 'figure'),
     Output('Health', 'figure'),
     Output('Prognastics', 'figure')],
    [Input('graph-update', 'n_intervals')]
)
def update_graph_scatter(n):
    # 更新公共数据源
    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1] * random.uniform(-0.1,0.1))
    x_data = list(X)
    y_data = list(Y)
    y_range = [min(Y), max(Y)]
    x_range = [min(X), max(X)]

    # 分别生成4个图表的配置
    fig1 = {
        'data': [go.Scatter(x=x_data, y=y_data, name='Scatter', mode= 'lines+markers')],
        'layout': go.Layout(title="Battery Voltage", xaxis_title="Time", yaxis_title="Voltage",
                            xaxis=dict(range=x_range), yaxis=dict(range=y_range))
    }
    fig2 = {
        'data': [go.Scatter(x=x_data, y=y_data, name='Scatter', mode= 'lines+markers')],
        'layout': go.Layout(title="Signal", xaxis_title="Time", yaxis_title="Signal Strength",
                            xaxis=dict(range=x_range), yaxis=dict(range=y_range))
    }
    fig3 = {
        'data': [go.Scatter(x=x_data, y=y_data, name='Scatter', mode= 'lines+markers')],
        'layout': go.Layout(title="Health", xaxis_title="Time", yaxis_title="Health Score",
                            xaxis=dict(range=x_range), yaxis=dict(range=y_range))
    }
    fig4 = {
        'data': [go.Scatter(x=x_data, y=y_data, name='Scatter', mode= 'lines+markers')],
        'layout': go.Layout(title="Prognastics", xaxis_title="Time", yaxis_title="Prediction Value",
                            xaxis=dict(range=x_range), yaxis=dict(range=y_range))
    }
    # 按顺序返回4个配置对应4个输出
    return fig1, fig2, fig3, fig4

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

后续拆分数据源时，只需要分别定义4组Y队列，各自更新后传入对应图表的data即可。

内容的提问来源于stack exchange，提问作者Disco