Comparaison entre d3.js et chart.js (uniquement pour les graphiques)
J'ai utilisé plusieurs fois chart.js dans mes projets mais je n'ai jamais utilisé d3.js. Beaucoup de gens disent que d3.js est le meilleur framework javascript pour les graphiques mais aucun d'entre eux n'est capable d'expliquer pourquoi, surtout quand je veux une comparaison avec chart.js.
J'ai trouvé ceci: http://www.fusioncharts.com/javascript-charting-comparison/ mais ce n'est pas ce que je cherchais.
Est-ce que quelqu'un connaît une comparaison de ces frameworks en termes de convivialité et de performance (uniquement pour les graphiques)?
d3.js n'est pas une bibliothèque "graphique". C'est une bibliothèque pour créer et manipuler SVG/HTML. Il fournit des outils pour vous aider à visualiser et à manipuler vos données. Bien que vous puissiez l'utiliser pour créer des graphiques conventionnels (barres, courbes, secteurs, etc.), il est capable de beaucoup plus. Bien sûr, avec ce "capable de tant de choses", la courbe d'apprentissage est plus raide. Il y a beaucoup de librairies de cartographie conventionnelles construites sur d3.js - nvd3.js, dimple.js, dc.js si vous voulez emprunter cette voie.
Je ne connais pas Chart.js _ mais un coup d’œil rapide sur le site Web m’indique qu’il s’agit plutôt d’une bibliothèque de cartographie standard. Il supporte 6 types de graphique de base et vous n'allez jamais faire truccommethisavecit . Mais l'API a l'air simple et je suis sûr que c'est facile à utiliser.
En dehors de cela, la distinction la plus évidente entre les deux est que Chart.js est basé sur une toile, tandis que d3.js concerne principalement SVG. (Maintenant je dis principalement parce que d3.js peut manipuler tous les types d’éléments HTML donc vous pouvez même l’utiliser pour vous aider à dessiner sur un canevas.) En général, canevas produira du SVG pour un grand nombre d’éléments gros - des milliers de points, lignes, etc ...). SVG, en revanche, est plus facile à manipuler et à interagir. Avec SVG, chaque point, ligne, etc. devient une partie du DOM - vous voulez que ce point devienne vert maintenant, il suffit de le changer. Avec canvas, c’est un dessin statique qui devait être redessiné pour apporter des modifications - bien sûr, il dessine si vite que vous ne le remarquerez généralement jamais. Voici ne bonne lecture de Microsoft.
Étant donné que j'essaie de trouver une bibliothèque de graphiques rapide pour afficher des graphiques sur des 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 dans une application native et toutes les données (y compris la bibliothèque JS) sont locales, donc ne ralentissez pas à cause de requêtes http. Pour optimiser encore plus les performances, j'ai également tout placé dans un seul fichier.
J'ai chargé 4 graphiques (ligne, barre, camembert, ligne/barre combo) avec ensemble environ 500 points de données.
Mon temps de mesure exclu 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 de graphiques jusqu'à la fin du rendu. Toute l'animation graphique a été désactivée.
C3 a pris environ 1500-1800 ms sur les appareils modernes Android et IPhone. L’iPhone a fonctionné environ 100 ms de mieux qu’Android.
Chart.js a pris environ 400-800ms. Android a fait 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 le fichier charts.js, de 80 à 100 ms. Exécuter le même test sous Android et l’émulateur iPhone a eu le même résultat que sur un ordinateur de bureau. Le ralentissement sur les appareils mobiles est donc certainement dû à des limites de matériel/traitement.
J'espère que ça t'as aidé
À JOUR 2016
La règle générale est la suivante:
d3.js - idéal pour les visualisations interactives
chart.js - idéal pour rapide et simple
Quelques autres bibliothèques de graphiques sont à la hausse, alors continuez à tester et n'oubliez pas de contribuer à la open source !