实时更新组件回调 Dash答案

【问题标题】：Live Updating Component Callback Dash实时更新组件回调 Dash
【发布时间】：2021-09-15 04:36:14
【问题描述】：

我无法理解 Dash 组件回调。我只是想定期更新。我指向的后端是一个将更新的数据库。下面是我正在使用的。该函数可以很好地生成我想要的图形，但是当数据源不可避免地更新时，我希望图形能够反映这一点。

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
children=[
    html.Div(id="Graphs", children=[dcc.Graph(id='lapTime')]),
    dcc.Interval(id='interval-component', 
                 interval=1 * 1000, 
                 n_intervals=0)
    
    ]
)

@app.callback(Output('Graphs', 'children'),
              Input('interval-component', 'n_intervals'))
def lapTimePlot():
      # SQL Calls for data
    channel = pyodbc.connect("DRIVER={ODBC Driver 17 for SQL Server};~~connection String Omitted~~") 
    Run=pd.read_sql("SQL OMITTED", channel).iloc[0]['Name']
    Event=pd.read_sql("SQL OMITTED", channel).iloc[0]['evID']
    Lap=pd.read_sql("SQL OMITTED", channel)
    #Clean Data
    Lap=Lap[Lap['RunName']==Run]
    Lap=Lap[Lap['evID']==Event]
    Lap=Lap[Lap['Ltime']>10] 
    Lap=Lap[Lap['Ltime']<(Lap['Ltime'].min()*1.1)]
    # Generate tables and sort values
    med=Lap.groupby(['Driver'])['Ltime'].median().sort_values()
    mini=Lap.groupby(['Driver'])['Ltime'].min().sort_values()
    # Combine tables and put into dataframe
    tab=pd.concat([mini,med],axis=1)
    tab=tab.reset_index()
    tab.columns = ['Driver','Min_Ltime','Mean_Ltime']
    tab=tab.sort_values('Min_Ltime',ascending=True) 
    tab=tab.reset_index(drop=True)
    tab=tab.reset_index()
    tab.columns = ['Rank','Driver','Min_Ltime','Mean_Ltime']
    tab.Rank=tab.Rank+1
    tab=tab.round({'Min_Ltime': 3,'Mean_Ltime': 3})
    # Set order by laptime
    Lap['Driver_Sort']= pd.Categorical(Lap['Driver'], categories=tab.Driver, ordered=True)
    Lap=Lap.sort_values('Driver_Sort',ascending=True)   
    ses="Session: " + Run  
    rheight=650/tab.Driver.count()   
    #Generate Table
    trace=go.Table(
                domain=dict(x=[0,0.2],
                            y=[0,1]),
                columnwidth=[1, 3, 1, 1],
                header=dict(
                values=["Rank","Driver", "Fast Lap", "Mean Lap",],
                height=50,
                font=dict(size=10),
                align="center"),
                cells=dict(
                values=tab.transpose().values.tolist(),
                height=rheight)) 
    
      # Generate box plot
    trace1=go.Box(
              x=Lap['Ltime'], y=Lap['Driver'] ,
              notched=True,
              orientation='h',
              xaxis="x1",
              yaxis="y1")
    layout = dict(xaxis1=dict( dict(domain=[0.28, 1], anchor='y1')),
                 yaxis1=dict( dict(domain=[0.05, 0.93], anchor='x1')),
                 title_text=ses) 
    Fig1 = go.Figure(data = [trace,trace1], layout = layout)
    return Fig1



if __name__ == "__main__":
app.run_server(debug=False)

我很难看到这是梨形的。第一次使用 Dash 和回调。

页面打开，并按预期每 1 秒更新一次，但图表上没有任何内容，并且似乎没有被 lapTimePlot() 呈现

更新：

使用app.run_server(debug=True,use_reloader=False) 运行时，调试时看不到任何错误。

【问题讨论】：

Fig1 的值是多少？如果不知道Fig1 的值是什么，我们就无法诊断问题。我还将在问题中包括“数据收集和从数据库中生成图形”部分。也用于测试集debug 到True。它很有可能会以这种方式告诉您问题所在。
@BasvanderLinden 我已经更新了图形创建问题以及运行app.run_server(debug=True)时的问题@
如果您将时间间隔更改为更长的时间，例如 20 秒，会发生什么情况？如果回调执行时间过长以至于它再次触发，它将永远不会在页面上更新。随着数据库调用的发生，它可能只需要更多时间。

标签： python plotly-dash

【解决方案1】：

我能确定的第一个问题是您缺少回调函数的参数。

每个回调函数至少需要一个Input 和Output。输入通过它们的位置映射到回调函数的参数。

@app.callback(Output("Graphs", "children"), Input("interval-component", "n_intervals"))
def lapTimePlot(n_intervals):
    # Do something...

您需要在此处提供此参数，即使您没有在回调中使用它。您可以将其命名为其他名称，只要您向 lapTimePlot 提供的参数数量等于使用的 Inputs 的数量即可。

【讨论】：