Tương tác giữa các phần tử

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

Alex Scriven

Data Scientist

Giữa các phần tử là gì?

 

  • Trước đây: Tương tác với input để thay đổi một figure
  • Bây giờ: Tương tác với figure để thay đổi figure khác

$$

  • Hai trường hợp:
    • Rê chuột trên figure
    • Bấm vào điểm dữ liệu
Xây dựng Dashboard với Dash và Plotly

Thuộc tính hoverData

$$

# Tạo figure và bố cục
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

$$

# Thiết lập callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)
Xây dựng Dashboard với Dash và Plotly

Lần rê đầu tiên

 

Điều gì xảy ra:

  • Người dùng rê chuột: thuộc tính hoverData của figure thay đổi
  • Callback nhận và trả về cho thẻ .P()
  • Ta thấy thông tin về điểm

Ảnh gif biểu đồ cột ngang doanh số tổng (trục x) vs. Quốc gia (trục y) với chữ "hover data" bên dưới có từ "none". Khi rê chuột lên cột Australia, chữ none đổi thành một dictionary chứa chi tiết điểm được rê, gồm nhãn quốc gia và giá trị.

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

Cẩn thận thiếu thông tin

 

  • Mục tiêu: Dùng 'country' trong callback (lọc và tạo lại biểu đồ)
    • Ví dụ trước - trong hoverData
  • Xem biểu đồ phân tán này (đã cập nhật loại biểu đồ và ID)
    • Không có country!

Ảnh gif biểu đồ phân tán doanh số tổng (trục x) vs. khối lượng bán (trục y), mỗi điểm là một quốc gia, bên dưới có chữ "hover data" với từ "none". Khi rê chuột lên điểm của Australia, chữ none đổi thành một dictionary chứa chi tiết điểm được rê gồm hai giá trị nhưng quan trọng là không có từ Australia

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

Thêm dữ liệu tùy chỉnh

 

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])
  • Giờ customData chứa quốc gia!

Ảnh gif biểu đồ phân tán doanh số tổng (trục x) vs. khối lượng bán (trục y), mỗi điểm là một quốc gia, bên dưới có chữ "hover data" với từ "none". Khi rê chuột lên điểm của Australia, chữ none đổi thành một dictionary chứa chi tiết điểm được rê, gồm hai giá trị và lần này trong thuộc tính customdata có từ Australia

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

Còn bấm chuột thì sao?

 

  • Cũng có thể kích hoạt callback khi bấm vào một điểm
    • Chỉ đổi 1 chỗ (thuộc tính clickData)
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)
  • Lưu ý: Không xuất hiện ngay lập tức

Ảnh gif biểu đồ cột ngang doanh số tổng (trục x) vs. Quốc gia (trục y) với chữ "hover data" bên dưới có từ "none". Khi rê chuột lên cột Australia, chữ none không đổi. Khi bấm vào cột này, chữ None đổi thành một dictionary chứa chi tiết điểm đã bấm, gồm nhãn quốc gia và giá trị.

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

Ayo berlatih!

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

Preparing Video For Download...