it-swarm.com.de

Vergleich zwischen d3.js und chart.js (nur für Charts)

Ich habe mehrmals chart.js in meinen Projekten verwendet, aber ich habe d3.js nie verwendet. Viele Leute sagen, dass d3.js das beste Javascript-Framework für Diagramme ist, aber keiner von ihnen kann erklären, warum, besonders wenn ich einen Vergleich mit chart.js möchte.

Ich habe folgendes gefunden: http://www.fusioncharts.com/javascript-charting-comparison/ aber es ist nicht das, wonach ich gesucht habe.

Kennt jemand einen Vergleich dieser Frameworks in Bezug auf Benutzerfreundlichkeit und Leistung (nur für Diagramme)?

69
mendrugory

d3.js ist keine "Diagramm" -Bibliothek. Es ist eine Bibliothek zum Erstellen und Bearbeiten von SVG/HTML. Es bietet Tools, mit denen Sie Ihre Daten visualisieren und bearbeiten können. Sie können damit zwar herkömmliche Diagramme (Balken, Linien, Torten usw.) erstellen, aber es ist noch viel mehr möglich. Natürlich geht mit dieser "Fähigkeit" eine steilere Lernkurve einher. Es gibt viele konventionelle Charting-Bibliotheken, die auf d3.js - nvd3.js, dimple.js, dc.js wenn Sie diesen Weg gehen wollen.

Ich bin nicht vertraut mit Chart.js aber ein kurzer Blick auf die Website zeigt mir, dass es eher ein Durchlauf der Mill Charting Library ist. Es werden 6 grundlegende Diagrammtypen unterstützt und Sie werden nie Zeugwiediesmites . Aber die API sieht einfach aus und ich bin sicher, es ist einfach zu bedienen.

Abgesehen davon ist der offensichtlichste Unterschied zwischen den beiden, dass Chart.js basiert auf Canvas, während d3.js handelt hauptsächlich von SVG. (Jetzt sage ich hauptsächlich weil d3.js kann alle Arten von HTML-Elementen manipulieren, also Sie können es sogar verwenden , um auf einer Zeichenfläche zu zeichnen.) Im Allgemeinen führt die Zeichenfläche SVG für eine große Anzahl von Elementen aus (ich spreche sehr) groß - Tausende von Punkten, Linien, etc ...). SVG hingegen ist einfacher zu manipulieren und zu interagieren. Mit SVG wird jeder Punkt, jede Linie usw. Teil des DOM - Sie möchten diesen Punkt jetzt grün sehen, ändern Sie ihn einfach. Mit Canvas ist es eine statische Zeichnung, die neu gezeichnet werden musste, um Änderungen vorzunehmen - natürlich wird sie so schnell gezeichnet, dass Sie sie normalerweise nicht bemerken. Hier ist einige gute Lektüre von Microsoft.

179
Mark

Da ich versuche, eine schnelle Diagrammbibliothek zum Anzeigen von Diagrammen auf Mobilgeräten zu finden, war die Leistung für mich wichtig. Es musste auch eine Lizenz vorhanden sein, die die kommerzielle Nutzung ermöglicht. Ich verglich:

  1. c3, das auf d3 basiert und daher SVG verwendet
  2. chart.js welches canvas benutzt

Die Diagramme werden in eine WebView-Komponente in einer nativen App geladen und alle Daten (einschließlich der JS-Bibliothek) sind lokal, sodass keine Verlangsamung aufgrund von http-Anforderungen erfolgt. Um die Leistung noch weiter zu maximieren, füge ich zusätzlich alles in eine einzige Datei ein.

Ich habe 4 Diagramme (Linie, Balken, Kreis, Linie/Balken-Kombination) mit zusammen ca. 500 Datenpunkten geladen.

Meine Zeitmessung schloss das tatsächliche Laden der HTML-Seite aus. Ich habe von dem Moment an gemessen, als ich angefangen habe, den Code der Diagrammbibliothek bis zum Ende des Renderns zu verwenden. Alle Diagrammanimationen wurden deaktiviert.

C3 dauerte auf modernen Android und IPhone-Geräten ca. 1500-1800 ms. Das iPhone schnitt rund 100 ms besser ab als Android.

Chart.js dauerte ungefähr 400-800ms. Android lief um 300ms besser als iPhone.

Kein Wunder, die SVG ist langsamer. Je nach Anwendungsfall möglicherweise zu langsam.

Auf einem Desktop-Computer betrug das Rendern in c3 etwa 150 bis 200 ms und in charts.js etwa 80 bis 100 ms. Das Ausführen des gleichen Tests in Android und iPhone Emulator hatte das gleiche Ergebnis wie auf dem Desktop. Die Verlangsamung auf Mobilgeräten ist also definitiv auf Hardware-/Verarbeitungsbeschränkungen zurückzuführen.

Hoffentlich hilft das

26
haferblues

AKTUALISIERT 2016

Die allgemeine Faustregel lautet:

d3.js - ideal für interaktive Visualisierungen

chart.js - ideal für schnell und einfach

Ein paar andere Charting-Bibliotheken sind auf dem Vormarsch, testen Sie also weiter und vergessen Sie nicht, einen Beitrag zum Open Source zu leisten!

19
the_red_baron