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:
- c3, das auf d3 basiert und daher SVG verwendet
- 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