Perbandingan antara d3.js dan chart.js (hanya untuk diagram) [ditutup]

Saya telah menggunakan chart.js dalam proyek saya beberapa kali tetapi saya tidak pernah menggunakan d3.js. Banyak orang mengatakan bahwa d3.js adalah kerangka kerja javascript terbaik untuk grafik tetapi tidak ada yang bisa menjelaskan alasannya, terutama ketika saya ingin perbandingan dengan chart.js.

Saya telah menemukan ini: http://www.fusioncharts.com/javascript-charting-comparison/ tetapi bukan itu yang saya cari.

Adakah yang tahu tentang perbandingan kerangka kerja ini dalam hal kegunaan dan kinerja (hanya untuk grafik)?

d3.jsbukan perpustakaan "charting". Ini adalah perpustakaan untuk membuat dan memanipulasi SVG / HTML. Ini menyediakan alat untuk membantu Anda memvisualisasikan dan memanipulasi data Anda. Meskipun Anda dapat menggunakannya untuk membuat bagan konvensional (batang, garis, pai, dll ...), ia mampu melakukan lebih banyak lagi. Tentu saja dengan "mampu melakukan banyak hal" ini datang kurva pembelajaran yang lebih curam. Ada banyak perpustakaan charting konvensional dibangun di atas d3.js- nvd3.js, dimple.js,dc.js jika Anda ingin pergi rute itu.

Saya tidak akrab dengan itu Chart.jstetapi melihat sekilas situs web memberi tahu saya itu lebih dari sekadar pustaka bagan pabrik. Ini mendukung 6 jenis bagan dasar dan Anda tidak pernah akan melakukan hal-hal seperti ini dengan itu . Tapi API terlihat jelas dan saya yakin itu mudah digunakan.

Selain itu, perbedaan paling jelas antara keduanya adalah Chart.jsberbasis kanvas, sedangkan d3.jsterutama tentang SVG. (Sekarang saya katakan terutama karena d3.jsdapat memanipulasi semua jenis elemen HTML sehingga Anda bahkan dapat menggunakannya untuk membantu Anda menggambar di atas kanvas.) Secara umum kanvas akan melakukan SVG untuk sejumlah besar elemen (saya berbicara sangat besar - ribuan titik, garis, dll ...). SVG, di sisi lain, lebih mudah untuk dimanipulasi dan berinteraksi dengannya. Dengan SVG setiap titik, garis, dll menjadi bagian dari DOM - Anda ingin titik itu berwarna hijau sekarang, ubah saja. Dengan kanvas, itu adalah gambar statis yang harus digambar ulang untuk membuat perubahan apa pun - tentu saja itu menggambar dengan sangat cepat sehingga Anda biasanya tidak akan pernah menyadarinya. Berikut beberapa bacaan yang bagus dari Microsoft.

Karena saya mencoba menemukan pustaka bagan cepat untuk menampilkan bagan di perangkat seluler, kinerja penting bagi saya. Itu juga harus memiliki lisensi yang memungkinkan untuk digunakan secara komersial. Saya membandingkan:

1. c3, yang didasarkan pada d3 dan karena itu menggunakan SVG
2. chart.js yang menggunakan kanvas

Bagan dimuat di dalam komponen WebView di dalam aplikasi asli dan semua data (termasuk pustaka JS) bersifat lokal, jadi tidak ada perlambatan karena permintaan http. Untuk lebih memaksimalkan kinerja, saya juga memasukkan semuanya ke dalam satu file.

Saya memuat 4 grafik (garis, batang, pai, garis / bar combo) dengan bersama-sama sekitar 500 titik data.

Pengukuran waktu saya tidak termasuk pemuatan halaman html yang sebenarnya. Saya mengukur bentuk saat saya mulai menggunakan kode pustaka diagram hingga akhir rendering. Semua animasi grafik dimatikan.

C3 membutuhkan waktu sekitar 1500-1800 ms pada perangkat Android dan IPhone modern. iPhone berkinerja sekitar 100 md lebih baik daripada Android.

Chart.js membutuhkan waktu sekitar 400-800ms. Android berperforma sekitar 300ms lebih baik daripada iPhone.

Tidak mengherankan, SVG lebih lambat. Tergantung pada kasus penggunaan Anda, mungkin terlalu lambat.

Pada komputer desktop rendering di c3 sekitar 150-200ms dan charts.js sekitar 80-100ms. Menjalankan pengujian yang sama di emulator Android dan iPhone memiliki hasil yang sama seperti di desktop. Jadi perlambatan pada perangkat seluler pasti karena batas perangkat keras / pemrosesan.

Semoga membantu

DIPERBARUI 2016

Aturan umumnya adalah:

d3.js - bagus untuk visualisasi interaktif

chart.js - bagus untuk cepat dan sederhana

Beberapa pustaka charting lainnya sedang naik daun, jadi teruslah menguji dan jangan lupa untuk berkontribusi pada open source !

chart.js
• Ini menggunakan tag kanvas html5 yang bergantung pada piksel, jadi ketika Anda mengubah ukuran grafik yang dihasilkan chart.js, Anda kehilangan kejelasan
• Ini bersifat deklaratif, artinya Anda hanya perlu mendeklarasikan input yang diperlukan untuk menghasilkan grafik
• Kurva belajar lebih sedikit
• Jenis bagan yang dihasilkan sudah ditentukan sebelumnya dan terbatas

d3.js
• Ini menggunakan svg yang merupakan resolusi independen, jadi ketika Anda mengubah ukuran grafik yang dihasilkan d3 Anda tidak akan kehilangan kejelasan
• Ini sangat penting, artinya Anda harus menulis beberapa logika untuk menghasilkan grafik
• Kurva pembelajaran yang curam
• Jenis bagan yang dihasilkan belum ditentukan sebelumnya dan Anda dapat membuat bagan apa pun yang Anda inginkan