Chart Selection Rules
เลือกชนิดกราฟจากสิ่งที่ข้อมูลต้องการสื่อ (data intent) ไม่ใช่จากความสวยงาม — ธีมสี/ฟอนต์ของกราฟดูที่ Chart.js Theme
Chart Type Gallery
Chart Type Gallery · CSS จำลองกราฟ 6 ชนิด
Bar ChartComparison
Line ChartTrend over time
DoughnutComposition ≤5
Area ChartTrend + volume
Scatter PlotCorrelation
Stat CardSingle KPI
3,036 MW
ทั้ง 6 ชนิดใช้สีจากจานสีแบรนด์ · Hover ที่แต่ละการ์ดเพื่อดู elevation lift
ตาราง Data Intent → Chart Type
| Data Intent | Chart Type ที่แนะนำ | ตัวอย่างการใช้ |
|---|---|---|
| Comparison (เทียบค่าระหว่างหมวดหมู่) | Bar chart (แนวตั้ง) | เทียบยอดขายแต่ละสาขา |
| Comparison (หมวดหมู่เยอะ/ชื่อยาว) | Bar chart (แนวนอน) | เทียบชื่อโครงการที่ยาว |
| Trend (การเปลี่ยนแปลงตามเวลา) | Line chart | กำลังผลิตไฟฟ้ารายเดือน |
| Trend (เน้นปริมาณสะสม) | Area chart | การเติบโตของกำลังผลิตสะสม |
| Composition (สัดส่วนของทั้งหมด, ≤5 หมวด) | Doughnut chart | สัดส่วนแหล่งพลังงาน |
| Composition (สัดส่วนหลายหมวด/ซับซ้อน) | Stacked bar chart | สัดส่วนรายได้แต่ละธุรกิจในเครือ แยกตามปี |
| Distribution | Histogram | การกระจายตัวของข้อมูลตัวเลข |
| Correlation (ความสัมพันธ์ 2 ตัวแปร) | Scatter plot | ความสัมพันธ์ระหว่างการลงทุนกับกำลังผลิต |
| Single KPI | Stat/Number card (ไม่ใช่กราฟ) | "กำลังผลิตรวม 3,000+ MW" |
Default Decision Rule
เมื่อไม่ได้ระบุชนิดกราฟมา ให้ถามตัวเองตามลำดับนี้:
- มีมิติเวลาไหม? (เช่น รายเดือน/รายปี) → ถ้ามี ให้เริ่มที่ Line chart
- ถ้าไม่มีมิติเวลา แต่เทียบระหว่างหมวดหมู่ → Bar chart
- ถ้าเน้นสัดส่วนของทั้งหมด (รวมกัน = 100%) → Doughnut chart (≤5 หมวดเท่านั้น — เกินกว่านี้อ่านยาก ให้เปลี่ยนเป็น stacked bar)
- ถ้าเป็นตัวเลขเดี่ยวไม่มีการเทียบ → ไม่ต้องใช้กราฟ ใช้ stat card แทน
หลีกเลี่ยง Pie/Doughnut ที่มีมากกว่า 5 หมวด
สัดส่วนที่ใกล้เคียงกันในกราฟวงกลมแยกด้วยตาได้ยากเมื่อหมวดหมู่เยอะ — เกิน 5 หมวดให้เปลี่ยนเป็น horizontal bar chart เรียงจากมากไปน้อยแทนเสมอ
ทุกกราฟต้องมี accessible data table คู่กันเสมอตามที่กำหนดใน Chart.js Theme — และ layout เมื่อมีหลายกราฟในหน้าเดียวดูที่ Dashboard Patterns
