Projelerimde birkaç kez chart.js kullandım ama hiç d3.js kullanmadım. Pek çok insan d3.js'nin grafikler için en iyi javascript çerçevesi olduğunu söylüyor, ancak hiçbiri nedenini açıklayamıyor, özellikle de chart.js ile bir karşılaştırma yapmak istediğimde.
Bunu buldum: http://www.fusioncharts.com/javascript-charting-comparison/ ama aradığım bu değil.
Kullanılabilirlik ve performans açısından bu çerçevelerin bir karşılaştırmasını bilen var mı (yalnızca çizelgeler için)?
Yanıtlar:
d3.jsbir "grafik" kitaplığı değildir. SVG / HTML oluşturmak ve değiştirmek için bir kitaplıktır. Verilerinizi görselleştirmenize ve değiştirmenize yardımcı olacak araçlar sağlar. Geleneksel grafikler (çubuk, çizgi, pasta, vb.) Oluşturmak için kullanabilseniz de, çok daha fazlasını yapabilir. Elbette bu "çok şey yapabilir" ile daha zorlu bir öğrenme eğrisi geliyor. Üzerine inşa geleneksel grafik kütüphaneleri bir yeri vardır d3.js- nvd3.js, dimple.js, dc.jsbu nedenle bu yolu gitmek isterseniz.
Aşina değilim, Chart.jsancak web sitesine hızlıca bir göz attığımda, bunun daha çok değirmen grafik kitaplığı olduğunu söylüyor. Bu 6 temel grafik türlerini destekler ve hiç yapmayacak olan şeyler gibi bu ile o . Ancak API basit görünüyor ve eminim kullanımı kolay.
Bunun dışında ikisi arasındaki en bariz ayrım Chart.js, tuval temelli ve d3.jsesas olarak SVG ile ilgili olmasıdır. (Şimdi diyorum esas nedeni d3.jsböylece HTML öğelerinin her türlü işleyebilirsiniz sen bile kullanabilirsiniz bir tuval üzerinde çizmek yardımcı olur.) Genel tuval dışarı ben çok büyük konuşuyorum unsurların çok sayıda (için SVG gerçekleştirecek yılında - binlerce nokta, çizgi, vb.). Öte yandan SVG'nin manipüle edilmesi ve etkileşimde bulunması daha kolaydır. SVG ile her nokta, çizgi vb. DOM'un bir parçası haline gelir - bu noktayı şimdi yeşil olmasını istiyorsunuz, sadece değiştirin. Kanvas ile, herhangi bir değişiklik yapmak için yeniden çizilmesi gereken statik bir çizimdir - elbette o kadar hızlı çizilir ki, genellikle asla fark etmeyeceksiniz. İşte Microsoft'tan bazı güzel okumalar .
Mobil cihazlarda grafikleri göstermek için hızlı bir grafik kitaplığı bulmaya çalıştığım için performans benim için önemliydi. Ticari olarak kullanılmasını mümkün kılan bir lisansa da sahip olması gerekiyordu. Ben karşılaştırdım:
Grafikler, yerel bir uygulama içindeki bir WebView bileşeninin içine yüklenir ve tüm veriler (JS kitaplığı dahil) yereldir, dolayısıyla http isteklerinden kaynaklanan yavaşlama olmaz. Performansı daha da artırmak için, ayrıca her şeyi tek bir dosyaya koyuyorum.
Yaklaşık 500 veri noktasıyla birlikte 4 grafik (çizgi, çubuk, pasta, çizgi / çubuk birleşik) yükledim.
Zaman ölçümüm html sayfasının gerçek yüklenmesini dışladı. Grafik kitaplığı kodunu kullanmaya başladığım andan, işlemenin sonuna kadar ölçtüm. Tüm grafik animasyonu kapatıldı.
C3, modern Android ve iPhone cihazlarında yaklaşık 1500-1800 ms sürdü. iPhone, Android'den yaklaşık 100 ms daha iyi performans gösterdi.
Chart.js yaklaşık 400-800ms sürdü. Android, iPhone'dan yaklaşık 300 ms daha iyi performans gösterdi.
Şaşırtıcı değil, SVG daha yavaş. Kullanım durumunuza bağlı olarak çok yavaş olabilir.
Bir masaüstü bilgisayarda c3'te görüntü oluşturma yaklaşık 150-200ms ve charts.js yaklaşık 80-100ms idi. Aynı testi Android ve iPhone emülatöründe çalıştırmak, masaüstündeki ile aynı sonucu verdi. Dolayısıyla, mobil cihazlardaki yavaşlama kesinlikle donanım / işlem limitlerinden kaynaklanmaktadır.
umarım yardımcı olur
GÜNCELLENMİŞ 2016
Genel kural şudur:
d3.js - etkileşimli görselleştirmeler için harika
chart.js - hızlı ve basit için harika
Diğer birkaç grafik kitaplığı yükselişte, bu yüzden test etmeye devam edin ve açık kaynağa katkıda bulunmayı unutmayın !