Comparaison entre d3.js et chart.js (uniquement pour les graphiques) [fermé]

J'ai utilisé chart.js dans mes projets plusieurs fois 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 en mesure d'expliquer pourquoi, surtout lorsque 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.

Quelqu'un connaît-il une comparaison de ces cadres en termes de convivialité et de performances (uniquement pour les graphiques)?

d3.jsn'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, lignes, secteurs, etc.), il est capable de bien plus encore. Bien sûr, avec ce «capable de tant de choses» vient une courbe d'apprentissage plus raide. Il y a beaucoup de bibliothèques de création de graphiques conventionnelles construites sur d3.js- nvd3.js, dimple.js, dc.jssi vous voulez aller dans cette voie.

Je ne suis pas familier avec, Chart.jsmais un rapide coup d'œil sur le site Web me dit que c'est plus une bibliothèque de cartographie de l'usine. Il prend en charge 6 types de graphiques de base et que vous ne va jamais faire des choses comme cela avec elle . Mais l'API semble simple et je suis sûr qu'elle est facile à utiliser.

En dehors de cela, la distinction la plus évidente entre les deux est qu'elle Chart.jsest basée sur le canevas, alors qu'elle d3.jsconcerne principalement SVG. (Maintenant, je dis principalement parce que vous d3.jspouvez manipuler tous les types d'éléments HTML afin que vous puissiez même l'utiliser pour vous aider à dessiner sur un canevas.) En général, le canevas exécutera SVG pour un grand nombre d'éléments (je parle très grand - des milliers de points, de lignes, etc ...). SVG, en revanche, est plus facile à manipuler et à utiliser. Avec SVG, chaque point, ligne, etc. fait partie du DOM - vous voulez que ce point soit vert maintenant, changez-le simplement. Avec le canevas, 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 quelques bonnes lectures de Microsoft.

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é:

1. c3, qui est basé sur d3 et utilise donc SVG
2. 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é

MISE À 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 en augmentation, alors continuez à tester et n'oubliez pas de contribuer à l' open source !

chart.js
• Il utilise une balise canvas html5 qui dépend du pixel, donc lorsque vous redimensionnez le graphique généré par chart.js, vous perdez de la clarté
• Il est déclaratif, cela signifie que vous devez simplement déclarer les entrées requises pour générer un graphique
• La courbe d'apprentissage est moindre
• Les types de graphiques générés sont prédéfinis et limités

d3.js
• Il utilise svg qui est indépendant de la résolution, donc lorsque vous redimensionnez le graphique généré par d3, vous ne perdrez pas de clarté
• C'est impératif, cela signifie que vous devez écrire une logique pour générer des graphiques
• Une courbe d'apprentissage abrupte
• Les types de graphiques générés ne sont pas prédéfinis et vous pouvez créer n'importe quel graphique de votre choix