Comme j'essaie de trouver une bibliothèque de graphiques rapide pour afficher des graphiques sur les appareils mobiles, les performances étaient importantes pour moi. Il devait également disposer d'une licence permettant une utilisation commerciale. J'ai comparé:
- c3, qui est basé sur d3 et utilise donc SVG
- chart.js qui utilise canvas
Les graphiques sont chargés dans un composant WebView à l'intérieur d'une application native et toutes les données (y compris la bibliothèque JS) sont locales, donc pas de ralentissement dû aux requêtes http. Pour maximiser encore plus les performances, je place également tout dans un seul fichier.
J'ai chargé 4 graphiques (ligne, barre, camembert, ligne / barre combo) avec environ 500 points de données.
Ma mesure du temps excluait le chargement réel de la page html. J'ai mesuré la forme du moment où j'ai commencé à utiliser le code de la bibliothèque graphique jusqu'à la fin du rendu. Toutes les animations de graphique ont été désactivées.
C3 a pris environ 1500-1800 ms sur les appareils Android et IPhone modernes. L'iPhone a fonctionné environ 100 ms mieux qu'Android.
Chart.js a pris environ 400 à 800 ms. Android a réalisé environ 300 ms de mieux que l'iPhone.
Pas de surprise, le SVG est plus lent. Selon votre cas d'utilisation, peut-être trop lent.
Sur un ordinateur de bureau, le rendu en c3 était d'environ 150 à 200 ms et charts.js d'environ 80 à 100 ms. L'exécution du même test dans l'émulateur Android et iPhone a eu le même résultat que sur le bureau. Donc, le ralentissement sur les appareils mobiles est certainement dû aux limites matérielles / de traitement.
J'espère que ça t'as aidé