元素間互動

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

什麼是元素間互動？

前面：與「input」互動以觸發圖表變更
現在：與「figure」互動以觸發另一個圖表變更

兩種情境：
- 滑過圖表
- 點擊資料點

hoverData 屬性

# Create figure and layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

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

# Set up a callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

第一次滑過事件

發生了什麼：

使用者滑過時：圖表的 hoverData 屬性會變更
回呼函式接收並回傳到 .P() 標籤
你會看到與點相關的資訊

一張水平長條圖，x 軸為總銷售額、y 軸為國家，底下有「hover data」文字，初始顯示為 none。當滑鼠滑過澳洲的長條時，none 變成含該點細節的字典，包括國家標籤與數值。

當心缺漏資訊

目標：在回呼中使用 country（過濾並重繪圖）
- 前例：在 hoverData 裡
看這張散點圖（圖型與相關 ID 已更新）
- 但沒有 country！

一張散點圖，x 軸為總銷售額、y 軸為銷售量，各點代表不同國家。底下有「hover data」文字，初始顯示為 none。當滑鼠滑過某點（如澳洲）時，none 變成含該點細節的字典，包含兩個數值，但關鍵是沒有出現 Australia 這個國家名稱。

加入自訂資料

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])

現在 customData 會包含 country！

一張散點圖，x 軸為總銷售額、y 軸為銷售量，各點代表不同國家。底下有「hover data」文字，初始顯示為 none。當滑鼠滑過某點（如澳洲）時，none 變成含該點細節的字典，除了兩個數值外，這次在 customdata 屬性中出現 Australia。

那點擊呢？

也能在點擊資料點時觸發回呼
- 只需改一處（使用 clickData 屬性）

@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)

注意：不會立即顯示

一張水平長條圖，x 軸為總銷售額、y 軸為國家，底下有「hover data」文字，初始顯示為 none。滑鼠滑過澳洲長條時，none 沒變；當點擊該長條後，None 變成含點擊點細節的字典，包括國家標籤與數值。

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板