สร้างชาร์ตข้อมูลที่ขับเคลื่อนด้วย JavaScript ด้วย Billboard.js

กราฟิกและภาพมีบทบาทสำคัญในการปรับปรุงเนื้อหาเว็บ ด้วยเทคโนโลยีที่ทันสมัยมันง่ายมากที่จะเพิ่มภาพที่กำหนดเองเช่นไอคอน SVG ลงในหน้าของคุณ.

แต่อีกหนึ่งภาพที่น่าแปลกใจที่คุณสามารถสร้างได้ตั้งแต่ต้นคือแผนภูมิเว็บ.

สิ่งนี้สามารถช่วยคุณได้ วาดกราฟข้อมูลด้วยสายตา เพื่อให้ผู้เยี่ยมชมสามารถอ่านข้อมูลที่เกี่ยวข้องได้อย่างรวดเร็ว และแทนที่จะเขียนกราฟด้วยตัวคุณเองคุณสามารถใช้ห้องสมุดอย่าง Billboard.js เพื่อยกของหนัก.

นี่คือการสร้างจริงบน D3 ซึ่งเป็นห้องสมุดการสร้างภาพข้อมูล JavaScript เป็นสิ่งที่ได้รับความนิยมมากที่สุดอย่างง่ายดายทำให้เป็นระบบที่ปลอดภัยที่สุดที่คุณสามารถขอได้.

ด้วย Billboard.js คุณสามารถเข้าถึง D3 API ได้อย่างรวดเร็วและง่ายดาย เป้าหมายหลักของ Billboard คือ ใช้งานง่ายทำให้ทุกคนสามารถเข้าถึงได้. แม้ว่ามันจะช่วยให้มีประสบการณ์กับ JavaScript แต่คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญ.

เพียงสังเกตว่า codebase ทั้งหมดใช้ไวยากรณ์ ES6 ซึ่งอาจสร้างความสับสนให้กับ JS devs ที่มีประสบการณ์น้อยกว่า.

ตราบใดที่คุณ รู้วิธีการรวบรวมรหัส คุณควรจะสบายดี เราได้กล่าวถึงคุณสมบัติเด่นบางประการจาก ES6 หากคุณต้องการเรียนรู้เพิ่มเติม.

รายละเอียดทางเทคนิคทั้งหมดเกี่ยวกับปลั๊กอินนี้อาจดูดี แต่คุณคงอยากรู้ สิ่งนี้สามารถทำได้.

ดูที่หน้าตัวอย่างและคลิกดูตัวอย่างสด.

คุณจะพบทุกสิ่งตั้งแต่กราฟวงกลมจนถึงแผนภูมิกระจายและกราฟแท่งเคลื่อนไหวแบบกำหนดเอง.

ด้วย Billboard.js คุณมี ควบคุมข้อมูลของคุณได้อย่างสมบูรณ์. คุณเป็นผู้ควบคุมลักษณะที่ปรากฏบนเพจลักษณะโครงสร้างและชนิดของคุณสมบัติ UI / UX ที่คุณเพิ่ม (ถ้ามี).

มันเป็นห้องสมุดแผนภูมิที่ยอดเยี่ยมและเป็นหนึ่งในวิธีที่ง่ายที่สุดในการรับ ดู GitHub ของโครงการซื้อคืนเพื่อเรียนรู้เพิ่มเติม.

คุณยังสามารถขุดลงในข้อมูลโค้ดนี้บน CodePen หากคุณต้องการของเล่นด้วยรหัสในเบราว์เซอร์ของคุณ.