วิดีโอสรุป

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

Alex Scriven

Data Scientist

บทที่ 1

 

  • ทบทวน Plotly
  • สร้าง Dash app แรก
  • ภาพรวมของ HTML

กราฟเส้นแบบ gif แสดงยอดขายรายเดือน เมื่อเลื่อนเมาส์ไปที่จุดข้อมูลจะแสดงเดือนและตัวเลขยอดขาย

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

บทที่ 2

 

  • โครงสร้างและสไตล์ด้วย HTML และ CSS
  • จัดตำแหน่ง ขนาด และสไตล์ขององค์ประกอบแอป
    • dictionary style

ภาพแสดงหัวเรื่อง "Top Sales Categories" ด้านล่างมีแผนภูมิแท่งแนวนอนอยู่ภายในกรอบเส้นประสีแดง แกน y แสดงหมวดหมู่การซื้อย่อย แกน x แสดงจำนวนคำสั่งซื้อ ด้านล่างกรอบมีรายการสองหมวดหมู่ยอดขายสูงสุด กรอบถูกขยายออกทุกด้านพร้อมลูกศรชี้ และมีพื้นที่ว่างรอบกราฟมากขึ้น

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

บทที่ 3

 

  • การโต้ตอบด้วย callbacks
  • Dropdowns, date pickers และ free-text inputs

gif ตัวอย่าง date picker ทั่วไป มีช่องป้อนวันที่แสดงวันที่ 1 กรกฎาคม 2025 เมื่อคลิกจะปรากฏปฏิทิน จากนั้นเลือกวันที่ 2 กรกฎาคม 2025 ปฏิทินจะปิดลงและวันที่ในช่องเปลี่ยนเป็นวันที่ที่เลือก

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

บทที่ 4

 

  • การโต้ตอบจาก hover และ click events
  • การสร้าง AG Grid Tables

gif ของตารางที่การคลิกเซลล์ต่าง ๆ จะแสดงกล่องข้อความด้านล่างพร้อม dictionary ของเนื้อหาในเซลล์ที่คลิก

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

ขั้นตอนต่อไป?

 

  • สร้าง dashboard ของคุณเอง
  • ทดลองใช้ callback chains
  • เรียนรู้ AG Grid Tables เพิ่มเติม

Screenshot at May 15 08-06-55.png

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

Plotly Studio

  • สร้าง Dash app จากชุดข้อมูลได้ในไม่กี่นาที ⚡
  • ปรับแต่งพื้นฐานที่ AI สร้างให้ 🔧
  • เผยแพร่ไปยัง Plotly Cloud ได้ด้วยคลิกเดียว 🚀

plotlystudio.png

1 plotly.com/studio
การสร้างแดชบอร์ดด้วย Dash และ Plotly

ขอบคุณ!

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

Preparing Video For Download...