คอมโพเนนต์เชิงโต้ตอบ

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

เพิ่มความสามารถเชิงโต้ตอบ

คอมโพเนนต์เชิงโต้ตอบที่มีประโยชน์:
- dcc.Checklist() = ช่องทำเครื่องหมาย
- dcc.RadioItems() = ปุ่มตัวเลือก
- dcc.Slider() / dcc.RangeSlider() = ตัวเลือกแบบสไลเดอร์
- dcc.DatePickerSingle() / dcc.DatePickerRange() = คล้ายสไลเดอร์แต่ใช้สำหรับวันที่

Sliders

Slider: ลากเพื่อเลือกค่าเดียว

Range Slider: ลากเพื่อเลือกสองค่า

เชื่อมต่อกับ callback ได้
- อัปเดตกราฟหรือคอมโพเนนต์

สไลเดอร์:

ภาพ GIF ของสไลเดอร์สีน้ำเงินบนพื้นหลังสีดำ พร้อมข้อความด้านล่างแสดงค่าที่เลือก เมาส์ลากตัวสไลเดอร์ขึ้นไปไม่กี่ตำแหน่ง ทำให้ค่าด้านล่างเพิ่มขึ้น

Range Slider:

ภาพ GIF ของ range slider สีน้ำเงินบนพื้นหลังสีดำ พร้อมข้อความด้านล่างแสดงสองค่าที่เลือก เมาส์ลากแต่ละด้านของสไลเดอร์ขึ้นและลง ทำให้ค่าด้านล่างเปลี่ยนแปลง

Sliders ใน Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

อาร์กิวเมนต์หลัก:

min/max : ขอบเขตของสไลเดอร์
value : ค่าเริ่มต้นที่เลือก
step : ขนาดของแต่ละช่วง
vertical : กำหนดให้แนวนอนหรือแนวตั้ง

Date Picker ใน Dash

DatePickerSingle: เลือกวันที่เดียว

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

date = ค่าวันที่เริ่มต้น
initial_visible_month = เดือนที่แสดงใน popup
กำหนด min_date_allowed และ max_date_allowed ได้ตามต้องการ

ภาพ GIF ของตัวเลือกวันที่ทั่วไป มีช่องป้อนวันที่แสดงวันที่ 1 กรกฎาคม 2025 เมาส์คลิกที่ช่องนี้แล้วปฏิทินปรากฏขึ้น จากนั้นเลือกวันที่ต่างออกไปคือ 2 กรกฎาคม 2025 ปฏิทินยุบตัวลงและวันที่ในช่องเปลี่ยนแปลงตามที่เลือก

Date Range Picker

คล้ายกับ DatePickerSingle

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

กำหนด start_date และ end_date เริ่มต้น

ภาพ GIF ของตัวเลือกช่วงวันที่ทั่วไป มีช่องป้อนวันที่สองช่องแสดงวันที่ในเดือนกรกฎาคม 2025 เมาส์คลิกช่องที่สองแล้วปฏิทินปรากฏขึ้นพร้อมไฮไลต์สีเขียวตลอดช่วงที่เลือก จากนั้นเลือกช่วงใหม่ทำให้วันที่เปลี่ยนแปลง

อัปเดตกราฟ

# 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 และ Plotly