ฉันใช้ chart.js ในโปรเจ็กต์ของฉันหลายครั้ง แต่ฉันไม่เคยใช้ d3.js หลายคนบอกว่า d3.js เป็นเฟรมเวิร์กจาวาสคริปต์ที่ดีที่สุดสำหรับแผนภูมิ แต่ไม่มีใครสามารถอธิบายได้ว่าทำไมโดยเฉพาะเมื่อฉันต้องการเปรียบเทียบกับ chart.js
ฉันได้พบสิ่งนี้: http://www.fusioncharts.com/javascript-charting-comparison/ แต่ไม่ใช่สิ่งที่ฉันกำลังมองหา
มีใครทราบเกี่ยวกับการเปรียบเทียบกรอบการทำงานเหล่านี้ในแง่ของการใช้งานและประสิทธิภาพ (สำหรับแผนภูมิเท่านั้น)
คำตอบ:
d3.jsไม่ใช่ไลบรารี "การสร้างแผนภูมิ" เป็นไลบรารีสำหรับสร้างและจัดการ SVG / HTML มีเครื่องมือที่ช่วยให้คุณเห็นภาพและจัดการข้อมูลของคุณ ในขณะที่คุณสามารถใช้เพื่อสร้างแผนภูมิธรรมดา (แท่งเส้นวงกลม ฯลฯ ... ) แต่ก็มีความสามารถอื่น ๆ อีกมากมาย แน่นอนว่า "ความสามารถมาก" นี้มาพร้อมกับเส้นโค้งการเรียนรู้ที่สูงชัน มีจำนวนมากของห้องสมุดการสร้างแผนภูมิการชุมนุมสร้างขึ้นบนที่มีd3.js- nvd3.js, dimple.js, dc.jsถ้าคุณต้องการที่จะไปเส้นทางที่
ฉันไม่คุ้นเคยChart.jsแต่เมื่อดูที่เว็บไซต์อย่างรวดเร็วบอกฉันว่ามันเป็นไลบรารีแผนภูมิของโรงสีมากกว่า มันสนับสนุน 6 ชนิดแผนภูมิขั้นพื้นฐานและคุณไม่เคยไปทำสิ่ง เช่น นี้ กับ มัน แต่ API ดูตรงไปตรงมาและฉันมั่นใจว่าใช้งานง่าย
นอกเหนือจากนั้นความแตกต่างที่ชัดเจนที่สุดระหว่างทั้งสองคือChart.jsเป็นแบบผ้าใบในขณะที่d3.jsส่วนใหญ่เกี่ยวกับ SVG (ตอนนี้ฉันพูดว่าส่วนใหญ่เป็นเพราะd3.jsสามารถจัดการองค์ประกอบ HTML ได้ทุกประเภทดังนั้นคุณจึงสามารถใช้มันเพื่อช่วยวาดภาพบนผืนผ้าใบได้) โดยทั่วไปผืนผ้าใบจะแสดง SVG สำหรับองค์ประกอบจำนวนมาก (ฉันพูดมาก - หลายพัน ของจุดเส้น ฯลฯ ... ) ในทางกลับกัน SVG นั้นจัดการและโต้ตอบได้ง่ายกว่า เมื่อ SVG แต่ละจุดเส้นและอื่น ๆ กลายเป็นส่วนหนึ่งของ DOM - คุณต้องการให้จุดนั้นเป็นสีเขียวในตอนนี้เพียงแค่เปลี่ยนจุดนั้น ด้วยผืนผ้าใบมันเป็นภาพวาดแบบคงที่ซึ่งจะต้องวาดใหม่เพื่อทำการเปลี่ยนแปลง - แน่นอนว่ามันวาดเร็วมากโดยปกติคุณจะไม่สังเกตเห็น ต่อไปนี้เป็นข้อมูลดีๆจาก Microsoft
เนื่องจากฉันพยายามค้นหาไลบรารีแผนภูมิที่รวดเร็วเพื่อแสดงแผนภูมิบนอุปกรณ์เคลื่อนที่ประสิทธิภาพจึงสำคัญสำหรับฉัน นอกจากนี้ยังต้องมีใบอนุญาตที่ทำให้สามารถใช้ในเชิงพาณิชย์ได้ ฉันเปรียบเทียบ:
แผนภูมิจะโหลดภายในคอมโพเนนต์ WebView ภายในแอปเนทีฟและข้อมูลทั้งหมด (รวมถึงไลบรารี JS) อยู่ในเครื่องดังนั้นจึงไม่ช้าลงเนื่องจากคำขอ http เพื่อเพิ่มประสิทธิภาพสูงสุดให้มากขึ้นฉันยังใส่ทุกอย่างไว้ในไฟล์เดียว
ฉันโหลดแผนภูมิ 4 รายการ (เส้น, บาร์, วงกลม, เส้น / แถบคำสั่งผสม) พร้อมกับจุดข้อมูลประมาณ 500 จุด
การวัดเวลาของฉันไม่รวมการโหลดหน้า html จริง ฉันวัดรูปแบบในช่วงเวลาที่ฉันเริ่มใช้รหัสไลบรารีการสร้างแผนภูมิจนกระทั่งสิ้นสุดการแสดงผล ภาพเคลื่อนไหวของแผนภูมิทั้งหมดถูกปิด
C3 ใช้เวลาประมาณ 1,500-1800 มิลลิวินาทีในอุปกรณ์ Android และ iPhone ที่ทันสมัย iPhone ทำงานได้ดีกว่า Android ประมาณ 100 มิลลิวินาที
Chart.js ใช้เวลาประมาณ 400-800ms Android ทำงานได้ดีกว่า iPhone ประมาณ 300 มิลลิวินาที
ไม่แปลกใจเลยที่ SVG ช้ากว่า อาจช้าเกินไปขึ้นอยู่กับกรณีการใช้งานของคุณ
บนคอมพิวเตอร์เดสก์ท็อปการแสดงผลใน c3 อยู่ที่ประมาณ 150-200ms และ charts.js ประมาณ 80-100ms การเรียกใช้การทดสอบเดียวกันในโปรแกรมจำลอง Android และ iPhone มีผลเช่นเดียวกับบนเดสก์ท็อป ดังนั้นอุปกรณ์พกพาที่ทำงานช้าลงจึงเกิดจากขีด จำกัด ของฮาร์ดแวร์ / การประมวลผล
หวังว่าจะช่วยได้
ปรับปรุง 2016
หลักการทั่วไปคือ:
d3.js - เหมาะสำหรับการแสดงภาพเชิงโต้ตอบ
chart.js - เหมาะสำหรับการใช้งานที่ง่ายและรวดเร็ว
ไม่กี่ห้องสมุดการสร้างแผนภูมิอื่น ๆที่เพิ่มขึ้นเพื่อให้การทดสอบและไม่ลืมที่จะนำไปสู่การเปิดแหล่งที่มา !