การโต้ตอบระหว่าง Element

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

Alex Scriven

Data Scientist

Between-element คืออะไร?

ที่ผ่านมา: โต้ตอบกับ input เพื่อเปลี่ยนแปลงกราฟ
ตอนนี้: โต้ตอบกับ กราฟ เพื่อเปลี่ยนแปลงกราฟอื่น

2 กรณีการใช้งาน:
- การ Hover เหนือกราฟ
- การคลิกที่จุดข้อมูล

Property 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)

การ Hover ครั้งแรก

สิ่งที่เกิดขึ้น:

ผู้ใช้ hover: property hoverData ของกราฟเปลี่ยนแปลง
Callback รับค่าและส่งคืนไปยัง tag .P()
แสดงข้อมูลที่เกี่ยวข้องกับจุดนั้น

GIF ของแผนภูมิแท่งแนวนอนแสดงยอดขายรวม (แกน x) เทียบกับประเทศ (แกน y) พร้อมข้อความ "hover data" ด้านล่าง และคำว่า "none" อยู่ถัดลงมา เมื่อเมาส์ hover ที่แท่งล่างสุดของออสเตรเลีย คำว่า none จะเปลี่ยนเป็น dictionary ที่มีรายละเอียดของจุดที่ hover รวมถึง label ประเทศและค่าข้อมูล

ระวังข้อมูลที่หายไป

เป้าหมาย: ใช้ 'country' ใน callback (กรองและสร้างกราฟใหม่)
- ตัวอย่างก่อนหน้า — อยู่ใน hoverData
ดู scatter plot นี้ (อัปเดตประเภทกราฟและ ID ที่เกี่ยวข้อง)
- ไม่มีข้อมูลประเทศ!

GIF ของ scatter chart แสดงยอดขายรวม (แกน x) เทียบกับปริมาณการขาย (แกน y) โดยแต่ละจุดแทนประเทศต่างกัน พร้อมข้อความ "hover data" และคำว่า "none" อยู่ด้านล่าง เมื่อ hover ที่จุดของออสเตรเลีย คำว่า none เปลี่ยนเป็น dictionary ที่มีค่าสองค่า แต่ไม่มีคำว่า Australia

การเพิ่ม Custom Data

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

ตอนนี้ customData มีข้อมูลประเทศแล้ว!

แล้วการคลิกล่ะ?

สามารถ trigger callback เมื่อคลิกที่จุดข้อมูลได้เช่นกัน
- เปลี่ยนแปลงเพียงจุดเดียว (property clickData)

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

สังเกต: ไม่แสดงผลทันที

GIF ของแผนภูมิแท่งแนวนอนแสดงยอดขายรวม (แกน x) เทียบกับประเทศ (แกน y) พร้อมข้อความ "hover data" และคำว่า "none" อยู่ด้านล่าง เมื่อ hover ที่แท่งของออสเตรเลีย ข้อความไม่เปลี่ยนแปลง แต่เมื่อคลิกที่แท่งนั้น คำว่า None เปลี่ยนเป็น dictionary ที่มีรายละเอียดของจุด รวมถึง label ประเทศและค่าข้อมูล

มาฝึกกันเถอะ!

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