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

Ich habe chart.js in meinen Projekten mehrmals 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 hinsichtlich Benutzerfreundlichkeit und Leistung (nur für Diagramme)?

d3.jsist 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 kann noch viel mehr. Mit diesem "zu so viel fähigen" kommt natürlich eine steilere Lernkurve. Es gibt viele herkömmliche Diagrammbibliotheken, die auf d3.js- aufgebaut nvd3.jssind dimple.js, dc.jswenn Sie diesen Weg gehen möchten.

Ich bin nicht vertraut damit, Chart.jsaber ein kurzer Blick auf die Website zeigt mir, dass es sich eher um einen Lauf der Mill Charting Library handelt. Es unterstützt 6 grundlegende Diagrammtypen und Sie sind nicht immer gehen zu tun Sachen wie diese mit ihm . Aber die API sieht einfach aus und ich bin sicher, dass sie einfach zu bedienen ist.

Abgesehen davon ist der offensichtlichste Unterschied zwischen den beiden, dass er auf Chart.jsLeinwand basiert, während d3.jses hauptsächlich um SVG geht. (Jetzt sage ich hauptsächlich, weil d3.jsalle Arten von HTML-Elementen manipuliert werden können, sodass Sie sie sogar zum Zeichnen auf einer Leinwand verwenden können.) Im Allgemeinen führt die Leinwand SVG für eine große Anzahl von Elementen aus (ich spreche sehr groß - Tausende von Punkten, Linien usw.). 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, ändern Sie ihn einfach. Bei Canvas handelt es sich um eine statische Zeichnung, die neu gezeichnet werden sollte, um Änderungen vorzunehmen. Natürlich zeichnet sie so schnell, dass Sie sie normalerweise nie bemerken. Hier ist eine gute Lektüre von Microsoft.

Da ich versuche, eine schnelle Diagrammbibliothek zu finden, um Diagramme auf Mobilgeräten anzuzeigen, war die Leistung für mich wichtig. Es musste auch eine Lizenz haben, die eine kommerzielle Nutzung ermöglicht. Ich verglich:

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

Die Diagramme werden in eine WebView-Komponente in einer nativen App geladen, und alle Daten (einschließlich der JS-Bibliothek) sind lokal, sodass aufgrund von http-Anforderungen keine Verlangsamung auftritt. 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 etwa 500 Datenpunkten geladen.

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

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

Chart.js dauerte ungefähr 400-800ms. Android schnitt rund 300 ms besser ab als das iPhone.

Kein Wunder, dass die SVG langsamer ist. Abhängig von Ihrem Anwendungsfall möglicherweise zu langsam.

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

hoffentlich hilft das

AKTUALISIERT 2016

Die allgemeine Faustregel lautet:

d3.js - ideal für interaktive Visualisierungen

chart.js - ideal für schnell und einfach

Einige andere Chartbibliotheken sind auf dem Vormarsch. Testen Sie also weiter und vergessen Sie nicht, einen Beitrag zum Open Source zu leisten !

chart.js
• Es wird das pixelabhängige HTML5-Canvas-Tag verwendet. Wenn Sie also die Größe des von chart.js generierten Diagramms ändern, verlieren Sie an Klarheit
• Es ist deklarativ, dh Sie müssen nur die erforderlichen Eingaben deklarieren, um ein Diagramm zu generieren
• Lernkurve ist weniger
• Die generierten Diagrammtypen sind vordefiniert und begrenzt

d3.js
• Es verwendet svg, das unabhängig von der Auflösung ist. Wenn Sie also die Größe des von d3 generierten Diagramms ändern, verlieren Sie nicht an Klarheit
• Es ist zwingend erforderlich, dh Sie müssen eine Logik schreiben, um Diagramme zu generieren
• Steile Lernkurve
• Generierte Diagrammtypen sind nicht vordefiniert und Sie können jedes gewünschte Diagramm erstellen