แนวคิดแดชบอร์ด
รวมกราฟเป็นแดชบอร์ด
แนวคิดแดชบอร์ด เป็นบทเรียน Python Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Python Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Python Academy มีบทเรียนทั้งหมด 4 บทเรียน
จากแผนภาพสู่แดชบอร์ด
แผนภาพหนึ่งแผนภาพตอบคำถามได้หนึ่งข้อ ส่วนแดชบอร์ดจะจัดแผนภาพที่เกี่ยวข้องหลายแผนภาพไว้ด้วยกัน เพื่อให้ผู้ชมติดตามสถานการณ์ทั้งหมดได้อย่างรวดเร็ว
การสร้างแดชบอร์ดต้องตัดสินใจว่าแผนภาพใดควรอยู่ด้วยกัน จะจัดวางอย่างไร และแผนภาพเหล่านั้นเกี่ยวข้องกันอย่างไร
แผนภาพย่อยในพล็อตลี
หากต้องการวางแผนภาพพล็อตลีหลายแผนภาพไว้ในรูปเดียว ให้ใช้ make_subplots(rows, cols) จาก plotly.subplots จากนั้นเพิ่มชุดข้อมูลแต่ละชุดลงในช่องที่ระบุด้วย fig.add_trace(trace, row=1, col=2)
วิธีนี้เทียบเท่ากับตารางแผนภาพย่อยของไลบรารีแมทโพลอตลิบในพล็อตลี
การวางแผนตาราง
ก่อนเขียนโค้ด ให้ร่างตารางก่อน ตัดสินใจว่าจะมีกี่แถวและกี่คอลัมน์ และแต่ละช่องจะใส่อะไร การคำนวณเหมือนกับการจัดวางตารางทั่วไป
panels = ['Revenue trend', 'Top products', 'Region map', 'Conversion %']
rows, cols = 2, 2
for i, p in enumerate(panels):
r = i // cols + 1
c = i % cols + 1
print('row', r, 'col', c, '->', p)ประเภทแผนภาพแบบผสม
โดยทั่วไปแดชบอร์ดจะผสมแผนภาพหลายประเภท ได้แก่ แผนภาพเส้นสำหรับแนวโน้ม แผนภาพแท่งสำหรับการจัดอันดับ และตัวเลขสำหรับตัวชี้วัดสำคัญ make_subplots รองรับทั้งหมด และคุณสามารถกำหนดประเภทแยกตามช่องด้วยอาร์กิวเมนต์ specs เช่น แผนภูมิวงกลมต้องใช้ type='domain'
การ์ด KPI
แดชบอร์ดมักเริ่มต้นด้วยตัวเลขเดี่ยวขนาดใหญ่ หรือ KPI ไลบรารีพล็อตลีมีชุดข้อมูล Indicator สำหรับแสดงค่า ผลต่างเมื่อเทียบกับเป้าหมาย (ถ้ามี) และมาตรวัด
ผลต่างก็คือค่าปัจจุบันลบด้วยค่าก่อนหน้า
current = 1280
previous = 1150
delta = current - previous
pct = delta / previous * 100
print('Value:', current)
print('Delta:', '+' + str(delta), '(' + format(pct, '.1f') + '%)')ชื่อเรื่องและการจัดวางร่วมกัน
กำหนดชื่อเรื่องโดยรวมของแดชบอร์ดด้วย fig.update_layout(title_text='Sales Dashboard') และกำหนดชื่อเรื่องของแต่ละแผงผ่านอาร์กิวเมนต์ subplot_titles ของ make_subplots การจัดวางที่สม่ำเสมอทำให้แผงต่าง ๆ ดูเป็นผลิตภัณฑ์เดียวกัน
แดชสำหรับแดชบอร์ดบนเว็บ
สำหรับแดชบอร์ดบนเว็บแบบโต้ตอบที่มีเมนูแบบเลื่อนลงและตัวกรอง เฟรมเวิร์กคู่กันของพล็อตลีอย่างแดชถือเป็นมาตรฐาน เฟรมเวิร์กนี้จับคู่แผนภาพพล็อตลีกับตัวควบคุม HTML และฟังก์ชันเรียกกลับที่อัปเดตแผนภาพเมื่อข้อมูลเข้าเปลี่ยน
แผนภาพคงที่ที่มีแผนภาพย่อยเพียงพอสำหรับรายงาน ส่วนแดชเหมาะสำหรับแอปแบบโต้ตอบสด
แนวคิดหลักของฟังก์ชันเรียกกลับ
ฟังก์ชันเรียกกลับของแดชจับคู่ข้อมูลเข้า เช่น ค่าจากเมนูแบบเลื่อนลง กับผลลัพธ์ เช่น แผนภาพ เมื่อข้อมูลเข้าเปลี่ยน ฟังก์ชันจะทำงานใหม่และคืนแผนภาพชุดใหม่ รูปแบบคือ รับข้อมูลเข้า ส่งแผนภาพออก
def update_chart(selected_region):
data = {'North': [1, 2, 3], 'South': [3, 2, 1]}
series = data.get(selected_region, [])
return {'region': selected_region, 'values': series}
print(update_chart('North'))
print(update_chart('South'))หลักการจัดวาง
แดชบอร์ดที่ดีจะมีลำดับชั้นดังนี้:
- KPI ที่สำคัญที่สุดอยู่ด้านซ้ายบน ซึ่งเป็นจุดที่สายตามองเป็นอันดับแรก
- แผนภาพรายละเอียดสนับสนุนอยู่ด้านล่าง
- ใช้สีอย่างสม่ำเสมอ เพื่อให้ชุดข้อมูลหนึ่งมีความหมายเหมือนกันทุกที่
หลีกเลี่ยงการยัดข้อมูลแน่นเกินไป พื้นที่ว่างช่วยให้เข้าใจได้ง่ายขึ้น
ใส่ใจประสิทธิภาพ
แผนภาพจำนวนมากและชุดข้อมูลขนาดใหญ่อาจทำให้แดชบอร์ดทำงานช้า ให้รวมข้อมูลก่อนสร้างแผนภาพ จำกัดจำนวนจุดข้อมูล และคำนวณใหม่เฉพาะแผงที่ข้อมูลเข้ามีการเปลี่ยนแปลง แดชบอร์ดที่ตอบสนองฉับไวจะมีคนใช้งาน ส่วนแดชบอร์ดที่ช้าจะถูกเลิกใช้
ตัวกรองและการกรองข้าม
แดชบอร์ดขั้นสูงช่วยให้การเลือกหนึ่งครั้งอัปเดตแผนภาพหลายแผนภาพพร้อมกัน ซึ่งเรียกว่าการกรองข้าม เมื่อคลิกภูมิภาคหนึ่งบนแผนที่ แผงแนวโน้มและการจัดอันดับจะถูกกรองให้แสดงเฉพาะภูมิภาคนั้น
ในแดช การทำงานนี้เชื่อมต่อด้วยฟังก์ชันเรียกกลับ โดยค่าที่เลือกจะกลายเป็นข้อมูลเข้าที่แผนภาพซึ่งขึ้นต่อกันทั้งหมดนำไปใช้
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับแดชบอร์ด
สรุปทบทวน
คุณได้เรียนรู้วิธีเปลี่ยนแผนภาพให้เป็นแดชบอร์ด:
make_subplots(rows, cols)+add_trace(..., row=, col=)สำหรับสร้างตาราง- ผสมประเภทแผนภาพและเริ่มต้นด้วยการ์ด KPI
Indicator - แดชเพิ่มตัวควบคุมแบบโต้ตอบผ่านฟังก์ชันเรียกกลับที่เชื่อมข้อมูลเข้ากับแผนภาพ
- จัดลำดับชั้นทางสายตาและใส่ใจประสิทธิภาพ
คำถามที่พบบ่อย
บทเรียน “แนวคิดแดชบอร์ด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แนวคิดแดชบอร์ด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Python Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Python Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แนวคิดแดชบอร์ด”
รวมกราฟเป็นแดชบอร์ด คุณปฏิบัติ Python Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Python Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Python Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “แนวคิดแดชบอร์ด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Python Academy นี้ได้ไหม
ได้ บทเรียน Python Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ