Chuỗi callback

Xây dựng Dashboard với Dash và Plotly

Alex Scriven

Data Scientist

Vì sao xâu chuỗi callback?

Đến nay, callback dùng để:
- Tạo lại biểu đồ
- Thay đổi HTML / văn bản

Còn callback kích hoạt callback khác thì sao?
- Trường hợp dùng: dropdown có điều kiện

Ví dụ phổ biến

Ảnh gif hai dropdown cạnh nhau. Dropdown đầu có placeholder Make, dropdown thứ hai là Model. Khi chọn Audi ở dropdown đầu rồi chuyển sang dropdown thứ hai, thấy rõ các tùy chọn đã được lọc chỉ còn các mẫu xe của Audi.

Input và output

Mấu chốt: nắm rõ luồng callback (input và output)
Công cụ hữu ích: sơ đồ input–output

Luồng xử lý:
- Người dùng đổi value của dropdown thứ nhất (INPUT)
- Một callback lọc và trả về options cho dropdown thứ hai (OUTPUT)
- Callback thứ hai có thể được kích hoạt (INPUT) bởi thuộc tính value của dropdown thứ hai.

Lưu đồ với các hình chữ nhật và mũi tên dọc, giữa các hộp có nhãn nhỏ. Hộp đầu là "user", mũi tên đến hộp "Major Category dropdown"; nhãn giữa là "value". Mũi tên xuống hộp "Minor category dropdown" với nhãn giữa "Options". Hộp này nối tới hộp cuối "(Optional) More callbacks" với nhãn giữa "Options".

Chuỗi callback trong 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

Nhiều đầu ra

Cập nhật nhiều phần tử

@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

Sơ đồ nhiều đầu ra

Sơ đồ luồng mở rộng từ sơ đồ trước. Thay vì hộp cuối cùng có dòng "(Tùy chọn) Nhiều callback hơn", giờ có hai mũi tên tới hai hộp song song bên dưới: "Dropdown Danh mục phụ" và "Tiêu đề HTML"; cả hai đều có mũi tên trỏ tới hộp tùy chọn ở cuối sơ đồ trước.

Ayo berlatih!

Xây dựng Dashboard với Dash và Plotly