Voici les meilleures bibliothèques de graphiques JavaScript pour 2019

Tout d'abord, un bref historique:

La collecte et l'utilisation des données continuant d'augmenter de façon exponentielle, le besoin de visualiser ces données devient de plus en plus important. Les développeurs cherchent à consolider des millions d'enregistrements de bases de données dans de magnifiques graphiques et tableaux de bord que les humains peuvent interpréter rapidement et intuitivement.

La technologie de visualisation des données a continué de s'améliorer au cours de la dernière décennie et de nombreuses bibliothèques de graphiques avancées sont désormais disponibles pour les consommateurs. Au début des années 2000, la génération de graphiques était dominée par les graphiques bitmap d'image côté serveur. Des plugins tels que Flash et Silverlight offraient une expérience de cartographie plus interactive mais avec un lourd tribut en termes de vitesse de téléchargement, d'autonomie de la batterie et de ressources système.

Avec l'explosion de l'utilisation des mobiles et des tablettes, les plugins n'étaient plus pris en charge sur les principales plates-formes et les développeurs ont dû passer à des technologies côté client ouvertes qui pouvaient fonctionner partout. Dans le même temps, l'avènement des écrans à très haute résolution et le zoom plus courant par gestes tactiles ont mis au premier plan les graphiques vectoriels indépendants de la résolution.

Entrez dans l'ère actuelle de la visualisation de données dominée par JavaScript et SVG (Scalable Vector Graphics). Les graphiques fonctionnent désormais sur tous les navigateurs, sans plugins spéciaux, prennent en charge l'interactivité et les animations et sont nets, même sur les appareils de résolution la plus élevée. En examinant plus de 50 bibliothèques de visualisation, ces 9 produits se sont démarqués:

D3.js

D3.js est une bibliothèque JavaScript graphique très étendue et puissante. Il vous permet de lier des données arbitraires à un modèle d'objet de document (DOM), puis d'appliquer des transformations basées sur les données au document.

D3 va bien au-delà des bibliothèques de graphiques classiques, y compris de nombreux autres modules techniques plus petits tels que les axes, les couleurs, les hiérarchies, les contours, l'assouplissement, les polygones, etc. Tout cela crée une courbe d'apprentissage abrupte.

Essayer de créer un graphique simple peut être compliqué. Tous les éléments, y compris les axes et les autres éléments du graphique, doivent être définis explicitement. De nombreux exemples montrent comment le CSS peut être utilisé pour styliser les éléments d'un graphique. Aucune fonctionnalité basée sur des graphiques ne s'applique automatiquement. Si vous voulez entrer dans les mauvaises herbes et utiliser votre créativité pour contrôler pleinement chaque élément, c'est le meilleur choix. Travailler contre la montre pour répondre aux exigences du projet de visualisation de données, ce n'est peut-être pas le meilleur choix à partir de zéro.

D3.js peut être un bloc de construction pour une bibliothèque de graphiques. Les développeurs ont utilisé D3 pour faciliter l'utilisation des solutions graphiques qui le consomment, telles que NVD3.

D3.js est open source et gratuit.

JSCharting

La bibliothèque de graphiques JSCharting prend en charge un grand nombre de types de graphiques, notamment des cartes, des gantt, des actions et d'autres qui nécessitent souvent des bibliothèques distinctes à utiliser. Il comprend des cartes intégrées de tous les pays du monde et une bibliothèque d'icônes SVG. Une suite de micro-graphiques autonomes peut être rendue dans n'importe quelle étiquette de graphique ou dans n'importe quel élément div d'une page. Des contrôles d'interface utilisateur (UiItems) sont également inclus, permettant des graphiques interactifs plus riches. Pour contrôler les données ou les variables de visualisation en temps réel est facile et les graphiques peuvent être exportés aux formats SVG, PNG, PDF et JPG.

La galerie est divisée en types de graphiques et en exemples de fonctionnalités. Le style du graphique est poli et donne des graphiques d'apparence nette. Les visuels globaux offrent une expérience de cartographie propre et professionnelle.

Les exemples inclus utilisent un objet de configuration pour personnaliser les graphiques. Les paramètres de création et de contrôle des types de cartes sont très simples à utiliser. Peu de paramètres de propriété sont nécessaires pour spécifier des types de graphiques plus complexes et JSCharting a des valeurs par défaut fortes et dynamiques, ce qui signifie qu'il tente de choisir automatiquement les meilleurs paramètres pour les scénarios.

La documentation comprend de nombreux didacticiels et des descriptions détaillées des propriétés d'API. De nombreuses propriétés incluent des exemples d'utilisation et des exemples de liens.

JSCharting est gratuit pour un usage non commercial et personnel et propose également des options de licence commerciale qui incluent tous les types de graphiques et tous les produits pour un prix unique.

Highcharts

Highcharts est une bibliothèque de graphiques JavaScript populaire utilisée par plusieurs des plus grandes entreprises du monde. Les graphiques sont générés à l'aide de SVG et de secours vers VML pour une compatibilité descendante jusqu'à IE6 / IE8. Les graphiques de démonstration montrent un ensemble de fonctionnalités assez riche mais ne sont pas impressionnants visuellement. La documentation générale comprend des didacticiels sur de nombreux sujets pertinents et la documentation de l'API est complète.

Le graphique utilise des options de configuration pour créer des graphiques et l'API est facile à utiliser.

Highcharts est gratuit pour un usage non commercial et personnel. Une licence commerciale est requise pour d'autres utilisations et les diagrammes de stock, de carte et de Gantt sont concédés sous licence séparément.

amCharts

amCharts a récemment publié sa version 4 qui ajoute un puissant moteur d'animation SVG qui permet de créer des scènes de type film.

Les graphiques de démonstration sont très beaux. La plupart des démos proposent un certain nombre de palettes et une interface utilisateur à curseur pour ajuster les variables du graphique en temps réel. La documentation comprend de nombreux didacticiels et des descriptions complètes des propriétés d'API.

La création d'un graphique est légèrement différente de l'approche basée sur la configuration et utilise à la place une API plus déclarative. Cela nécessite un peu plus de code pour configurer les graphiques, mais offre une meilleure expérience de complétion de code.

amCharts propose une licence gratuite avec des graphiques de marque et des licences payantes pour d'autres usages.

Graphiques Google

Les graphiques Google sont puissants et faciles à utiliser.

Les exemples de graphiques sont propres et faciles à regarder. La galerie et la galerie étendue affichent de nombreux types de graphiques, mais le fait d'appuyer sur le menu hamburger révèle d'autres types (comme le calendrier) qui ne sont pas affichés dans ces listes de galeries.

Chaque type de graphique a un didacticiel dédié avec des exemples en direct. Les didacticiels incluent du code pour les fonctionnalités associées et les listes d'API. C'est une expérience agréable de démarrer avec une nouvelle bibliothèque de graphiques.

Les graphiques sont personnalisés à l'aide de l'objet d'options de configuration. Les ensembles de données sont remplis à l'aide d'une classe DataTable qui peut être utilisée par tous les graphiques. Chaque type de graphique a des options uniques répertoriées dans les didacticiels spécifiques au type. La dénomination des propriétés est standardisée et de nombreuses options fonctionnent dans tous les types.

Les graphiques Google sont gratuits, mais il y a une mise en garde. Il s'agit d'un service Web et ne peut pas être hébergé localement. Dans le passé, Google a supprimé les API, donc si votre utilisation est essentielle, vous pouvez choisir une autre option.

ZingChart

ZingChart propose de nombreux types de graphiques et s'intègre aux cadres angulaires, réactifs et autres. Il dispose d'un ensemble de fonctionnalités puissantes avec de nombreuses options de personnalisation.

Les graphiques de démonstration montrent une gamme de thèmes de style, dont certains semblent meilleurs que d'autres, mais les options pour les styliser au besoin sont là. Les démos ne présentent pas tous les types de graphiques disponibles.

La documentation comprend des didacticiels pour tous les types disponibles, un bon nombre de fonctionnalités et une liste complète des API.

ZingChart utilise des options de configuration pour personnaliser les graphiques. Les exemples incluent de nombreux paramètres de propriété tels que le style de police. Celles-ci peuvent nuire à la compréhension des paramètres requis pour un graphique donné.

ZingChart peut être utilisé gratuitement avec la marque. Les licences payantes sont disponibles pour une utilisation sans marque.

FusionCharts

FusionCharts existe depuis de nombreuses années, à commencer par un plugin de graphique basé sur Flash. Il s'agit d'une bibliothèque de visualisation de graphiques robuste. Il prend en charge de nombreux formats de données, y compris XML, JSON et JavaScript, fonctionne dans les navigateurs modernes et est rétrocompatible avec IE6. De nombreux frameworks JavaScript et langages de programmation côté serveur sont également pris en charge.

La galerie de graphiques comprend un grand nombre d'exemples et ils ont une apparence visuelle propre.

La documentation comprend de bonnes descriptions d'API et des exemples de chaque type de graphique. Les propriétés de configuration sont regroupées par tâches et fonctionnalités de graphique.

Les graphiques sont créés à l'aide d'options basées sur la configuration et sont relativement faciles à utiliser. La liste des propriétés peut être longue lorsque l'on approfondit l'API. Toutes les propriétés de configuration sont superficielles telles que {chartLeftMargin, showAlternateHGridColor}. Cela ressemble à une tentative d'améliorer la complétion du code.

FusionCharts est gratuit pour un usage personnel avec la marque graphique. Les licences payantes sont disponibles pour un usage commercial et sans marque.

KOOLCHART

KoolChart est une bibliothèque de graphiques JavaScript basée sur le canevas HTML 5. Un produit de cartographie et de grille est également disponible.

Leur nouvelle version v5 comprend un ensemble de fonctionnalités plus interactives et un style mis à jour. Les visuels sont propres et modernes. L'utilisation du canevas offre de meilleures performances au détriment de la fonction de trame.

Les exemples utilisent un XML basé sur des chaînes pour appliquer des options de graphique, ce qui semble moins pratique que d'autres approches. Ces options ressemblent à HTML5 mais sont définies via une chaîne JavaScript.

L'API est bien documentée avec des exemples de graphiques pour chaque propriété. Un manuel PDF de 173 pages est également disponible.

Une période d'essai de deux mois est disponible pour évaluation. Une licence est requise après l'expiration de la période d'essai.

Chart.js

Chart.js est une bibliothèque JavaScript open source prenant en charge 8 types de graphiques. C'est une petite bibliothèque js à seulement 60 ko. Les types incluent les graphiques en courbes, les graphiques à barres, les graphiques en aires, le radar, les graphiques à secteurs, les bulles, les nuages ​​de points et les graphiques mixtes. Une série chronologique est également prise en charge. Il utilise un élément de canevas pour le rendu et est réactif lors du redimensionnement de la fenêtre pour maintenir la granularité de l'échelle. Il est rétrocompatible avec IE9. Les Polyfills sont également disponibles pour fonctionner avec IE7.

Les exemples de visuels sont assez modernes et incluent des animations initiales lors du dessin pour la première fois. Il s'anime en douceur lors de l'ajout de séries ou de points de données en temps réel. Les options de graphique peuvent être modifiées après et l'appel d'une fonction update () redessine le graphique.

L'exemple de code source n'apparaît pas dans la galerie de sites Web, mais est disponible dans le dépôt GitHub. Les options de configuration sont utilisées pour créer et modifier des graphiques. L'API d'options est claire et intuitive.

La documentation est complète et comprend des didacticiels avec l'API de propriété et des extraits de code.

Chart.js est une bibliothèque open source et gratuite à utiliser pour un usage personnel et commercial, ce qui est un plus. Le nombre limité de types peut être un problème pour les exigences de tableau de bord plus avancées.

Conclusion

L'écosystème des bibliothèques de graphiques JavaScript a considérablement évolué au cours de la dernière décennie. Aujourd'hui, il existe un grand nombre de produits de cartographie qui répondent à des exigences très diverses, desservant un large éventail de projets à travers des centaines de types de graphiques. La plupart des bibliothèques fournissent une version d'essai gratuite ou une version de marque vous permettant d'évaluer l'efficacité du graphique avec vos propres données, le chargement et la complexité du projet.

Il est facile pour la plupart des bibliothèques de graphiques de gérer des ensembles de données simples et des visualisations statiques. Cependant, les graphiques peuvent ne pas toujours gérer les choses correctement lorsque des données dynamiques du monde réel sont visualisées. Plus de travail peut être nécessaire pour ajuster et organiser les éléments de sorte que les graphiques semblent corrects et ces ajustements manuels peuvent être interrompus lorsque de nouvelles données dynamiques sont visualisées.

Pour sélectionner la meilleure solution de graphique JS pour vos besoins uniques, je vous recommande de tester vos propres données par rapport à quelques bibliothèques répertoriées ci-dessus afin de garantir un ajustement idéal pour vos projets actuels et futurs.