St-core.fscss ไลบรารีทำกราฟเส้นด้วย CSS ล้วนโดยไม่ใช้ JS
ทำความรู้จัก st-core.fscss เครื่องมือสร้างกราฟเส้นหลายซีรีส์แบบไม่ต้องใช้ SVG, Canvas หรือไลบรารี JavaScript ช่วยให้เว็บเบาและโหลดเร็ว
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- st-core.fscss เป็นระบบทำกราฟเส้นด้วย Pure CSS ล้วน
- ไม่ต้องใช้ SVG, Canvas หรือไลบรารี JavaScript ใดๆ
- กำหนดตำแหน่งแกน X และค่าแกน Y ได้ง่ายผ่านระบบสเกล 0-100
- ช่วยให้การแสดงผลกราฟน้ำหนักเบาและไม่มีภาระรันไทม์ JS
นักพัฒนาเว็บที่กำลังมองหาวิธีแสดงผลข้อมูลในรูปแบบกราฟแบบน้ำหนักเบา น่าจะสนใจ st-core.fscss ซึ่งเป็นระบบสร้างกราฟเส้นด้วย CSS ล้วน โดยจุดเด่นสำคัญคือการทำงานโดยไม่พึ่งพา SVG, Canvas หรือไลบรารี JavaScript ใดๆ ทั้งสิ้น ทำให้การเรนเดอร์กราฟมีความเร็วสูงและไม่เพิ่มภาระให้กับเบราว์เซอร์
ระบบนี้ถูกออกแบบมาให้ใช้งานผ่านการประกาศตัวเรนเดอร์เพียงหนึ่งตัวคือ @st-chart-line โดยทุกองค์ประกอบที่ตรงกับคลาสที่กำหนดจะแปลงร่างเป็นเส้นกราฟอิสระทันที ซึ่งช่วยลดความซับซ้อนในการเขียนโค้ดและจัดการโครงสร้างหน้าเว็บได้อย่างมีประสิทธิภาพ
การใช้ Pure CSS สร้างแผนภูมิหรือกราฟเส้นถือเป็นแนวทางที่น่าสนใจสำหรับโปรเจกต์ที่ต้องการเพิ่มประสิทธิภาพการโหลดหน้าเว็บ (Performance) เนื่องจากตัดภาระการทำงานของ JavaScript ออกไปได้เกือบทั้งหมด เหมาะกับแดชบอร์ดขนาดเล็กหรือการแสดงข้อมูลสถิติง่ายๆ ที่ไม่ต้องอัปเดตแบบเรียลไทม์ซับซ้อน
ในส่วนของการกำหนดพิกัด แกน X จะถูกตรึงตำแหน่งไว้ที่สัดส่วนคงที่ประกอบด้วย 0%, 14%, 28%, 42%, 57%, 71%, 85% และ 100% ขณะที่ค่าบนแกน Y จะอ้างอิงจากสเกล 0 ถึง 100 โดยที่ค่า 100 จะอยู่ส่วนบนสุดของกราฟ และระบบจะทำการกลับด้านพิกัดภายในให้เข้ากับระบบพิกัดของ CSS โดยอัตโนมัติ
นอกจากนี้ ผู้ใช้งานยังสามารถปรับแต่งค่าโทนสีหรือตัวแปรต่างๆ ได้อย่างอิสระ ไม่ว่าจะเป็นการกำหนดค่าแบบ Global ทั้งระบบ หรือเลือกกำหนดเฉพาะเจาะจงสำหรับกราฟชิ้นใดชิ้นหนึ่งก็ได้ตามความต้องการในการออกแบบอินเทอร์เฟซ
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น