Python Dash 回調循環

Question

我嘗試學習 Python Dash 來可視化一些數據。 我研究了帶有多個按鈕的 Plotly 示例：

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Button('Button 1', id='btn-nclicks-1', n_clicks=0),
    html.Button('Button 2', id='btn-nclicks-2', n_clicks=0),
    html.Button('Button 3', id='btn-nclicks-3', n_clicks=0),
    html.Div(id='container-button-timestamp')
   ])

@app.callback(Output('container-button-timestamp', 'children'),
          Input('btn-nclicks-1', 'n_clicks'),
          Input('btn-nclicks-2', 'n_clicks'),
          Input('btn-nclicks-3', 'n_clicks'))
def displayClick(btn1, btn2, btn3):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btn-nclicks-1' in changed_id:
        msg = 'Button 1 was most recently clicked'
    elif 'btn-nclicks-2' in changed_id:
        msg = 'Button 2 was most recently clicked'
    elif 'btn-nclicks-3' in changed_id:
        msg = 'Button 3 was most recently clicked'
    else:
        msg = 'None of the buttons have been clicked yet'
    return html.Div(msg)

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

該代碼顯示最近單擊了哪個按鈕。 我想問是否可以把它放在一個循環中，這樣我就可以循環 i 個按鈕，因為如果我想使用 50 個左右的按鈕，這幾乎是工作。

代替

html.Button('Button 1', id='btn-nclicks-1', n_clicks=0),
html.Button('Button 2', id='btn-nclicks-2', n_clicks=0),
html.Button('Button 3', id='btn-nclicks-3', n_clicks=0),

就像是：

for i in range(number_buttons):
    html.Button('Button i', id='btn-nclicks-i', n_clicks=0)

@app.callback(
    Input('btn-nclicks-i', 'n_clicks')
)

我會很感激一些指向帶有 Dash 回調的教程或示例的鏈接。

Answer 1

最棘手的部分是將循環中創建的所有按鈕作為Input添加到callback中，但您可以使用模式匹配回調來做到這一點（請參閱dash 文檔）。 這是一個小示例，使用您提供的代碼作為基礎，但通過循環使用 10 個按鈕：

from dash.dependencies import Input, Output, ALL
import dash_html_components as html

app = dash.Dash(__name__)

btnlst = [html.Button(
              'Button {}'.format(i),
               id={
                   'type' : 'mybuttons',
                   'index' : i,
               }
         )
         for i in range(10)]

app.layout = html.Div(btnlst + [
    html.Div(id='btn-out-container'),
])

@app.callback(Output('btn-out-container', 'children'),
                Input({'type':'mybuttons', 'index':ALL}, 'n_clicks'))
def display_click(nclicks):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if changed_id == '.':
        msg = 'None of the buttons have been clicked yet'
    else:
        # do additional parsing of changed_id here as necessary
        msg = 'Changed property: {}'.format(changed_id)
    return html.Div(msg)

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

需要注意的重要事項：

• 我事先創建了按鈕列表btnlst並將其添加到另一個html.Div組件的第一個參數中。 該技術是通用的，不僅適用於模式匹配回調。
• 請注意每個按鈕的id屬性的形式，這是在模式匹配回調中使用它們所必需的。 id的type可以是任何字符串，但如果您要像這樣使用多個組，建議不要混合它們的名稱。
• display_clicks中使用的changed_id具有非常自定義的格式，正如您在查看 output 時看到的那樣。 您可能需要對其進行一些額外的解析，特別是如果您除了按鈕列表之外還有任何其他Input 。