串接回呼

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

為何要串接回呼？

目前回呼會：
- 重新產生圖表
- 變更 HTML／文字

那回呼觸發另一個回呼呢？
- 情境：條件式下拉選單

常見範例

兩個並排的下拉式選單動畫。第一個的預留文字為 Make，第二個為 Model。滑鼠在第一個選單選取 Audi 後移到第二個選單，可以看到第二個選單的可用選項已被過濾為 Audi 的車款。

輸入與輸出

祕訣：留意回呼路徑（輸入與輸出）
好用工具：輸入—輸出圖

流程：
- 使用者變更第一個下拉選單的 value（INPUT）
- 一個回呼篩選並回傳第二個下拉選單的 options（OUTPUT）
- 第二個回呼可由第二個下拉選單的 value 屬性（INPUT）觸發。

一個垂直連接方塊與箭頭的流程圖。方塊間有小文字框。第一個方塊為 user，箭頭指向第二個方塊「Major Category dropdown」，中間小框標示「value」。往下箭頭連到「Minor category dropdown」，中間小框為 Options。此方塊再以箭頭連到最後一個方塊「（Optional）More callbacks」，中間小框為「Options」。

Dash 中的串接回呼

@callback(
  Output('minor_cat_dd', 'options'),
  Input('major_cat_dd', 'value'))

def update_major_cat(major_cat_dd):
    # Filter options (list of dicts)
    return minor_options

@callback(
  Output('minor_cat_dd', 'value'),
  Input('minor_cat_dd', 'options'))

def update_minor_cat(minor_cat_options):
    # Pick a default value
    return chosen_value

多重輸出

同步更新多個元素

@callback(
  Output('my_title', 'children'),
  Output('minor_cat_dd', 'value'),
  Input('minor_cat_dd', 'options')
)
def some_function(input):
  # function body
  return title_value, dropdown_value

多重輸出示意圖

延伸前一張的流程圖。最後一個「（Optional）More callbacks」方塊改為由上方分出兩個並列箭頭，指向「Minor Category Dropdown」與「HTML Title」兩個方塊，二者再各自以箭頭指向底部的可選方塊。

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板