交互式组件

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

增强交互性

常用交互组件：
- dcc.Checklist() = 复选框
- dcc.RadioItems() = 单选按钮
- dcc.Slider() / dcc.RangeSlider() = 滑块选择器
- dcc.DatePickerSingle() / dcc.DatePickerRange() = 日期版"滑块"

滑块

滑块：拖动选择单个值

区间滑块：拖动选择两个值

提醒：可连接到回调
- 用于更新图表或组件

单个滑块：

黑色背景上的蓝色滑块动图。下方文本显示当前选定值。鼠标拖动滑块，数值随之增大。

区间滑块：

黑色背景上的蓝色区间滑块动图。下方文本显示选定的两个值。鼠标分别拖动两端，数值随之变化。

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 年 4 月 11 日，柱状图和标题随之更新

Passons à la pratique !

使用 Dash 和 Plotly 构建仪表板