Dash Python 如何制作多個更新圖，如何命名

Question

這里的新編碼器，我正在嘗試制作 4 個共享相同隨機數據的圖（盡管我計划稍后將它們分開）。 當它只是一張圖時，它可以很好地處理隨機數據並自動縮放。 在 go.layout 中，無法放置要標記的圖形。 現在我已經添加了多個，它們都沒有任何標題、軸標簽或數據。 請幫忙！

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import random
import plotly.graph_objs as go
from collections import deque
#setting first points
X = deque(maxlen = 20)
X.append(1)
Y = deque(maxlen = 20)
Y.append(1)
#app settings, html layout
app = dash.Dash(__name__)
  
app.layout = html.Div(children=[
    html.H1([
        html.H1(children='Graphs'),
        dcc.Graph(id = 'Battery Voltage', animate = True),
        dcc.Interval(
            id = 'graph-update',
            interval = 1000,
            n_intervals = 0
        ),
    ],
),
html.Div(
    [
        dcc.Graph(id = 'Signal', animate = True),
        dcc.Interval(
            id = 'graph-update2',
            interval = 1000,
            n_intervals = 0
        ),
    ],
),
html.Div(
    [
        dcc.Graph(id = 'Health', animate = True),
        dcc.Interval(
            id = 'graph-update3',
            interval = 1000,
            n_intervals = 0
        ),
    ],
),
html.Div(
    [
        dcc.Graph(id = 'Prognastics', animate = True),
        dcc.Interval(
            id = 'graph-update4',
            interval = 1000,
            n_intervals = 0
        ),
    ],
)])

#this is what keeps the graph updating 
@app.callback(
    [Output('Battery Voltage', 'figure'),
     Output('Signal', 'figure'),
     Output('Health', 'figure'),
     Output('Prognastics', 'figure')],
    [ Input('graph-update', 'n_intervals'),
      Input('graph-update2', 'n_intervals'),
      Input('graph-update3', 'n_intervals'),
      Input('graph-update4', 'n_intervals')]
)
  
def update_graph_scatter(n):

    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1] * random.uniform(-0.1,0.1))
    data = go.Scatter(
            x=list(X),
            y=list(Y),
            name='Scatter',
            mode= 'lines+markers'
    )
  
    return {'data': [data],
            'layout' : go.Layout(title="Battery Voltage",
                                 xaxis_title="Time",
                                 yaxis_title="Voltage",
                                 xaxis=dict(range=[min(X),max(X)]),
                                 yaxis = dict(range = [min(Y),max(Y)])
                                 )
            }

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

當運行多個

就一個

Answer 1

如果其他人有這個問題，定義必須在他們回調后立即出現。 我猜我的格式也很糟糕。 它應該看起來像：

@app.callback(Output('Health', 'figure'),
              Input('graph-update3', 'n_intervals'))

def update_graph3(n): 
    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1] * random.uniform(-0.1,0.1))
    #those are random points, we'd socket something in
    data = go.Scatter(
            x=list(X),
            y=list(Y),
            name='Scatter',
            mode= 'lines+markers'
    )
    print("data:", data)
    return {'data': [data],
            'layout' : go.Layout(title="Health",
                                 xaxis_title="Time",
                                 yaxis_title="Health",
                                 xaxis=dict(range=[min(X),max(X)]),
                                 yaxis = dict(range = [min(Y),max(Y)])
                                 )
            }