ตัวเลือกหลัก ๆ
| ตัวเลือก | หน้าตา | ความลื่น | ไฟล์ที่ต้องโหลดเพิ่ม | หมายเหตุ |
|---|---|---|---|---|
| ที่ใช้อยู่ (วาด SVG เอง) | 3 มิติแบบเค้ก | ปานกลาง ชี้แล้วต้องวาดชิ้นใหม่ | 0 | ทำเอกฟเฟกต์ละเอียดเองยาก ปัญหาที่เจอมาจากตรงนี้ |
| Apache ECharts ⭐ | สวยมาก มีเงา ไล่สี ชิ้นเด้งออก | ลื่นมาก วาดด้วย Canvas | ~150 KB (เฉพาะส่วนพาย) | ฟรี ใช้ในบริษัทได้ จัดป้ายไม่ให้ทับกันอัตโนมัติ รองรับนิ้วบน iPad ใช้ได้กับกราฟอื่นทั้งระบบด้วย |
| Highcharts 3D | 3 มิติจริง สวยที่สุด | ลื่น | ~100 KB | เสียค่าลิขสิทธิ์ถ้าใช้ในบริษัท |
| Chart.js | เรียบ ๆ 2 มิติ | ลื่น | ~70 KB | เบาสุด แต่หน้าตาธรรมดา |
| Three.js (3 มิติแบบเกม) | สวยอลังการ | หนักการ์ดจอ | 150 KB+ | เกินความจำเป็น iPad อาจร้อน/กินแบต |
แนะนำ Apache ECharts >> https://echarts.apache.org/examples/
- เป็นพายกึ่ง 3 มิติ (โดนัทไล่สี + เงา + ชิ้นเด้งออกแบบสปริง) ดูพรีเมียมแบบแอป iOS
- วาดบน Canvas ชี้เมาส์หรือแตะแล้วไม่ต้องวาดทั้งหน้าใหม่ ปัญหากระพริบและค้างจึงไม่เกิดตั้งแต่ต้น
- จัดตำแหน่งตัวเลข % ไม่ให้ทับกันให้เอง
- โหลดไฟล์กราฟเฉพาะตอนเปิด popup ตามหลัก Performance first หน้าอื่นไม่ช้าลง
- ถ้าชอบ ภายหลังเปลี่ยนกราฟแท่งและกราฟเส้นทั้งระบบให้เป็นสไตล์เดียวกันได้ด้วย
| # | Library | Rendering | 10M pts? | 3D native? | License | Best for |
|---|---|---|---|---|---|---|
| 1 | LightningChart JS | WebGL/GPU | 0.29s | Full suite | Free non-commercial; commercial | Performance-critical, real-time, scientific, industrial |
| 2 | Apache ECharts | Canvas + WebGL | Limited | Partial | Apache 2.0 (free) | Free large-dataset dashboards |
| 3 | Chart.js | Canvas/CPU | Crashes | None | MIT (free) | Simple dashboards, zero-cost |
| 4 | D3.js | SVG + Canvas | SVG fails | Via plugin | BSD-3 (free) | Fully custom visualizations |
| 5 | ApexCharts | SVG | Crashes | None | MIT (free) | Polished SaaS dashboards |
| 6 | Plotly.js | SVG + partial WebGL | Slow | Partial | MIT (free) | Scientific / Python-to-web |
| 7 | amCharts 5 | SVG/Canvas | Crashes | Limited | Free with attribution | Rich animated business charts |
Facebook Comments Box
