互動元件

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

提升互動性

常用的互動元件：
- dcc.Checklist() = 核取方塊
- dcc.RadioItems() = 單選按鈕
- dcc.Slider() / dcc.RangeSlider() = 滑桿選擇器
- dcc.DatePickerSingle() / dcc.DatePickerRange() = 日期版的滑桿

滑桿

Slider：拖曳選單一數值

Range Slider：拖曳選兩個數值

提醒：可連結到 callback
- 用來更新圖表或元件

A slider:

一個藍色滑桿的動態圖，黑色背景，下方顯示目前選取的數值。滑鼠拖曳滑桿刻度向上，下面的數值隨之增加。

A range slider:

一個藍色範圍滑桿的動態圖，黑色背景，下方顯示選取的兩個數值。滑鼠分別拖曳兩側刻度上下移動，下面的數值隨之變動。

Dash 中的滑桿

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

重要引數：

min/max：滑桿邊界
value：起始選取值
step：每格增量
vertical：設定水平或垂直

Dash 中的日期選擇器

DatePickerSingle：選取單一日期

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = 起始選取
initial_visible_month = 快顯視窗中的月份
可選擇限制 min_date_allowed 與 max_date_allowed

常見日期選擇器的動態圖。欄位中初始為 2025 年 7 月 1 日。點擊後跳出月曆，選到 2025 年 7 月 2 日，月曆收合且欄位日期更新。

日期範圍選擇器

與 DatePickerSingle 類似

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

設定初始的 start_date 與 end_date

常見日期範圍選擇器的動態圖。有兩個日期輸入欄，已選定 2025 年 7 月的一段範圍。點擊第二個欄位後跳出月曆，綠色區塊標示整段範圍，接著重新選取新範圍，日期隨之更新。

更新圖表

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Create fig
    return fig

在 Dash 中使用日期選擇器的動態圖。左側方框標題為「Controls」，內有一個標示「Sale Date Select」的日期選擇器，日期為 04/11/2011。右側是長條圖，x 軸為 "Total Sales ($)"，y 軸為 "Major Category"。圖下方標示「Daily Sales by Major Category」，圖表標題為「Sales on 2011-04-11」。滑鼠在日期選擇器改到隔天 2011-04-12，長條圖的欄位與高度隨之變更，標題也更新。

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板