Callback trong Dash

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

Alex Scriven

Data Scientist

Callback là gì?

Chức năng kích hoạt bởi tương tác
- Người dùng tương tác với một phần tử
  - -> Kích hoạt hàm Python
    - --> Một đối tượng được thay đổi

Lợi ích: tăng tính tương tác ✨

Callback trong Dash

Bắt đầu với hàm decorator
- Dùng from dash import Input, Output
Output: nơi nhận giá trị trả về
- component_id: xác định thành phần
- component_property: thuộc tính sẽ thay đổi
Input: yếu tố kích hoạt callback
- component_property: thuộc tính dùng trong hàm

@callback(

   Output(component_id='my_plot', 
          component_property='figure'),

   Input(component_id='my_input', 
          component_property='value')

)

def some_function(data):
    # Subset Data
    # Recreate Figure
    return fig

Menu thả xuống trong Dash

dcc.Dropdown(id='title_dd',
             options=['Title 1', 'Title 2'])

Danh sách giá trị

Callback với menu thả xuống

app.layout =[

  dcc.Dropdown(id='title_dd',
      options=['Title 1', 'Title 2']),

  dcc.Graph(id='my_graph')])

@callback(
    Output(component_id='my_graph', 
           component_property='figure'),

    Input(component_id='title_dd', 
           component_property='value')
)

# @callback()
def update_plot(selection):
    title = "None Selected"
    if selection:
        title = selection

    bar_fig = px.bar(
      data_frame=ecom_sales, 
      title=f'{title}',
      x='Total Sales ($)', y='Country')

  return bar_fig

Menu thả xuống đầu tiên

GIF trình duyệt Chrome với biểu đồ cột: tổng doanh số (trục x) theo quốc gia (trục y), phía trên có menu thả xuống với tùy chọn Title 1 và Title 2. Con trỏ chọn từng mục và tiêu đề biểu đồ đổi theo giá trị đã chọn

Menu thả xuống làm bộ lọc

Trường hợp phổ biến: menu lọc DataFrame của biểu đồ

# @callback()
def update_plot(input_country):
    country = 'All Countries'

    sales = ecom_sales.copy(deep=True)

    if input_country:
        country = input_country
        sales = sales[sales['Country'] == country]

        bar_fig = px.bar(
            data_frame=sales, title=f"Sales in {country}",
            x='Total Sales ($)', y='Country')
    return bar_fig

Bộ lọc hoạt động

GIF trình duyệt Chrome với biểu đồ cột: tổng doanh số (trục x) theo quốc gia (trục y), phía trên có menu thả xuống với tên các quốc gia. Con trỏ chọn từng mục, tiêu đề biểu đồ đổi theo giá trị đã chọn và biểu đồ lọc còn một cột

Ayo berlatih!

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