Thành phần tương tác

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

Alex Scriven

Data Scientist

Tăng tính tương tác

Một số thành phần tương tác hữu ích:
- dcc.Checklist() = Hộp kiểm
- dcc.RadioItems() = Nút chọn
- dcc.Slider() / dcc.RangeSlider() = Thanh trượt
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Tương tự thanh trượt nhưng cho ngày

Thanh trượt

Slider: kéo để chọn một giá trị

Range Slider: kéo để chọn hai giá trị

Lưu ý: Có thể liên kết callback
- Cập nhật biểu đồ hoặc thành phần

Một slider:

Ảnh gif một thanh trượt xanh trên nền đen, bên dưới hiển thị giá trị đã chọn. Chuột kéo nút trượt lên vài mức, giá trị tăng.

Một range slider:

Ảnh gif một thanh trượt phạm vi màu xanh trên nền đen, bên dưới hiển thị hai giá trị đã chọn. Chuột kéo mỗi đầu nút trượt lên xuống, các giá trị thay đổi.

Slider trong Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Tham số chính:

min/max: Giới hạn thanh trượt
value: Giá trị khởi tạo
step: Bước mỗi nấc
vertical: Ngang hay dọc

Bộ chọn ngày trong Dash

DatePickerSingle: Chọn một ngày

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

date = chọn ban đầu
initial_visible_month = tháng hiển thị trong popup
Có thể giới hạn min_date_allowed và max_date_allowed

Ảnh gif về bộ chọn ngày phổ biến. Có một ô nhập ngày với 1/7/2025 là ngày hiện tại. Chuột nhấp vào, lịch xuất hiện. Chọn ngày khác 2/7/2025, lịch thu gọn và ngày trong ô đã đổi.

Bộ chọn khoảng ngày

Tương tự DatePickerSingle

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

Đặt start_date và end_date ban đầu

Ảnh gif về bộ chọn khoảng ngày phổ biến. Có hai ô nhập ngày với các ngày trong tháng 7/2025 được chọn. Chuột nhấp ô thứ hai, lịch hiện ra, toàn bộ khoảng đã được tô xanh; sau đó chọn khoảng mới làm thay đổi các ngày

Cập nhật biểu đồ

# 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]

    # Tạo fig
    return fig

Ảnh gif về việc dùng bộ chọn ngày trong Dash. Bên trái là hộp 'Controls' chứa bộ chọn ngày 'Sale Date Select' với ngày 04/11/2011. Bên phải là biểu đồ cột với trục x "Total Sales ($)" và trục y "Major Category". Bên dưới ghi "Daily Sales by Major Category", tiêu đề biểu đồ là "Sales on 2011-04-11". Chuột chọn ngày tiếp theo 11/04/2011, biểu đồ thay đổi cột và tiêu đề cập nhật theo ngày.

Ayo berlatih!

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