สร้างกราฟไดนามิกได้อย่างรวดเร็วบน D3 ด้วย Plottable.js

ของฟรี ไลบรารี D3.js เป็นเพียงหนึ่งในหลาย ๆ ที่ให้คุณ สร้างกราฟิกแบบโต้ตอบ บนหน้า ในขณะที่ D3 อาจเป็นที่นิยมที่สุดในกลุ่ม แต่การเรียนรู้ที่จะใช้มันไม่ใช่เรื่องง่าย.

นั่นเป็นเหตุผล Plottable.js เป็นห้องสมุดที่มีค่า มันเป็นโครงการโอเพนซอร์ซฟรี สร้างขึ้นบน D3.js, ทำให้ทุกคนสามารถสร้างได้ง่ายขึ้น กราฟข้อมูลเชิงโต้ตอบตั้งแต่เริ่มต้น.

ห้องสมุดนี้ จัดการกับงานที่สกปรกทั้งหมด, เพื่อให้คุณสามารถมุ่งเน้นเฉพาะเช่นข้อมูล plottable สร้างรหัสที่เหมาะสม สำหรับขนาดและตำแหน่งของแผนภูมิใด ๆ ที่คุณเลือก.

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

คุณสามารถ สร้างชิ้นส่วนใหม่ทีละชิ้น และ กำหนดการตั้งค่าเองแบบไดนามิก. ด้วยวิธีนี้คุณสามารถเปลี่ยนองค์ประกอบแบบโต้ตอบสีภาพเคลื่อนไหวตำแหน่งขนาดและสิ่งอื่น ๆ ที่คุณต้องการได้อย่างง่ายดาย.

ห้องสมุดเต็มรูปแบบ มีอยู่ใน GitHub หากคุณต้องการเรียกดูซอร์สโค้ดและดาวน์โหลดสำเนา.

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

กราฟทุกอันคือ โต้ตอบอย่างเต็มที่, ด้วยรหัสที่มาในการบูต หากคุณต้องการสร้างกราฟที่คล้ายกันเพียงคัดลอก / วางรหัส JS และฟอร์แมตใหม่ตามต้องการ.

ฉันมีรายการโปรดส่วนตัวสองรายการจากเว็บไซต์: ปฏิทินความร้อน จำลองตามกระดานกิจกรรมของ GitHub และ แผนภูมิที่ประสาน ด้วยคุณสมบัติการเลือกแบบไดนามิก.

หากคุณไม่เคยใช้ D3.js มาก่อนคุณจะต้องดิ้นรนเพื่อเรียนรู้ห้องสมุดนี้ โดยเฉพาะอย่างยิ่งเพราะมัน เขียนใน TypeScript, ดังนั้นคุณอาจต้องการเลือกสิ่งนั้นเช่นกัน รหัสสุดท้ายคือ เรียบเรียงเป็น ES5 JavaScript, ดังนั้นควร ทำงานในเบราว์เซอร์หลัก ๆ ทั้งหมด.

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