Fermer

août 13, 2018

24 bibliothèques JavaScript pour créer de beaux graphiques


Il est pratiquement impossible d'imaginer un tableau de bord sans graphique ni graphique. Ils présentent des statistiques complexes rapidement et efficacement. En outre, un bon graphique améliore également la conception globale de votre site Web.

Dans cet article, je vais vous montrer quelques-unes des meilleures bibliothèques JavaScript pour les graphiques / graphiques. Ces bibliothèques vous aideront à créer de magnifiques graphiques personnalisables pour vos projets futurs.

Alors que la plupart des bibliothèques sont gratuites et open source, certaines d'entre elles fournissent une version payante avec des fonctionnalités supplémentaires.

D3.js – Documents pilotés par les données

 d3js

Quand on pense à la cartographie aujourd'hui, D3.js est le premier nom qui apparaît. En tant que projet open source, D3.js apporte définitivement de nombreuses fonctionnalités puissantes qui manquaient dans la plupart des bibliothèques existantes. Des fonctionnalités telles que "Enter and Exit", les transitions puissantes et la familiarité avec jQuery ou Prototype en font l’une des meilleures bibliothèques JavaScript pour les graphiques. Les graphiques dans D3.js sont rendus via HTML, SVG et CSS.

Contrairement à de nombreuses autres bibliothèques JavaScript, D3.js ne contient pas de graphiques prédéfinis. Cependant, vous pouvez consulter la liste des graphes construits avec D3.js pour avoir une vue d'ensemble.

D3.js ne fonctionne pas bien avec les navigateurs plus anciens comme IE8. Vous pouvez toujours utiliser des plugins comme aight plugin pour la compatibilité entre navigateurs.

Des sites Web comme NYTimes Uber et Weather.com ont utilisé D3.js intensivement dans le passé.

Google Charts

 google-charts

Google Charts est ma bibliothèque JavaScript de référence pour créer facilement des graphiques. Il fournit de nombreux graphiques pré-construits tels que des graphiques à secteurs, des graphiques à barres, des graphiques de calendrier, des graphiques à secteurs, des graphiques géographiques, etc.

Les graphiques de Google comportent également diverses options de personnalisation permettant de modifier l'apparence du graphique. Les graphiques sont rendus en utilisant HTML5 / SVG pour assurer la compatibilité entre les navigateurs et la portabilité entre les plates-formes pour les iPhones, les iPad et Android. Il inclut également VML pour prendre en charge les anciennes versions d'IE.

Voici une excellente liste d'exemples générée à l'aide de graphiques Google.

ChartJS

 chartjs

ChartJS fournit de magnifiques designs plats pour les graphiques. Il utilise l'élément de toile HTML5 pour le rendu. La prise en charge des anciens navigateurs comme IE7 / 8 est ajoutée via polyfill.

Les graphiques ChartJS sont réactifs par défaut. Ils fonctionnent bien dans les mobiles et les tablettes. Avec 6 types de cartes de base différents (core, bar, beignet, radar, ligne et zone polaire), ChartJS est sans aucun doute l’une des librairies open source les plus impressionnantes de ces dernières années.

Chartist.js

 chartistjs

Chartist.js fournit de magnifiques graphiques réactifs. Tout comme ChartJS, Chartist.js est également le produit de la communauté qui a été frustré par l'utilisation de bibliothèques de graphiques JavaScript très coûteuses. Il utilise SVG pour rendre les graphiques. Il peut être contrôlé et personnalisé via les requêtes médias CSS3 et Sass. Notez également que Chartist.js fournit des animations sympas qui ne fonctionneront que dans les navigateurs modernes.

n3-charts

 n3charts

Si vous êtes un développeur Angular, vous trouverez certainement n3-charts extrêmement utile et intéressant. n3-charts est construit sur D3.js et Angular. Il fournit différents diagrammes standard sous la forme de directives angulaires personnalisables.

Checkout liste des cartes construites à l'aide de ns-charts.

Ember Charts

 ember-charts

Ember Charts construit avec D3.js et Ember.js. Il fournit des séries chronologiques, des graphiques à barres, des graphiques à secteurs et des diagrammes de dispersion facilement personnalisables. Il utilise SVG pour rendre des graphiques.

Smoothie Charts

 smoothie

Si vous traitez avec des données en temps réel de flux, Smoothie Charts peut être utile. Il utilise l'élément de toile HTML5 pour rendre le graphique. C'est une bibliothèque JavaScript pure qui fournit des options telles que les couleurs de délai et de démarrage aux graphiques en temps réel.

Chartkick

 chartkick

Chartkick est une bibliothèque de codes JavaScript conçue pour les applications Ruby. Il fournit tous les principaux types de graphiques, tels que les graphiques en secteurs, les colonnes, les barres, les zones, les géo, les scénarios et les séries multiples. Les graphiques sont rendus via SVG.

ZingChart

 ZingChart

ZingChart offre un produit flexible, interactif, rapide, évolutif et moderne pour créer rapidement des diagrammes. Leur produit est utilisé par des sociétés telles qu'Apple, Microsoft, Adobe, Boeing et Walmart, et utilise Ajax, JSON, HTML5 pour produire rapidement de superbes graphiques.

Highcharts JS

 highchartsjs

Highcharts JS est une autre bibliothèque très populaire pour la création de graphiques. Il est livré avec de nombreux types d'animations sympas suffisantes pour attirer de nombreux yeux sur votre site. Tout comme les autres bibliothèques, Highcharts est livré avec de nombreux graphes prédéfinis tels que spline, area, areapline, colonne, barre, camembert, dispersion, etc.

L'un des plus grands avantages de Highcharts JS est la compatibilité chemin vers Internet Explorer 6. Les navigateurs standard utilisent SVG pour le rendu graphique. Dans Internet Explorer hérité, les graphiques sont dessinés en utilisant VML.

Alors que Highcharts JS est gratuit pour un usage personnel, vous devez acheter une licence pour un usage commercial.

Fusioncharts

 fusioncharts

Fusioncharts est l'une des plus anciennes bibliothèques de création de code JavaScript, sortie en 2002. Les graphiques sont rendus en HTML5 / SVG et VML pour une meilleure portabilité et compatibilité. .

Contrairement à de nombreuses bibliothèques, Fusioncharts fournit une analyse des données via JSON et XML. Vous pouvez également exporter ces graphiques dans trois formats différents: PNG, JPG et PDF.

Fusioncharts est hautement compatible avec les anciens navigateurs – même à partir d'Internet Explorer 6. Cette compatibilité descendante en faisait un choix très populaire depuis longtemps.

Vous pouvez utiliser gratuitement la version filigranée de Fusioncharts dans des projets personnels et commerciaux. Toutefois, vous devez acheter une licence pour supprimer le filigrane.

Flot

 flot

Flot est une bibliothèque de codes JavaScript pour jQuery. C'est également l'une des bibliothèques de cartographie les plus anciennes et les plus populaires.

Flot prend en charge les lignes, les points, les zones remplies, les barres et toute combinaison de celles-ci. Il est également compatible avec les anciens navigateurs – depuis IE6 et Firefox 2.

Flot est entièrement gratuit et un support commercial est fourni sur demande spéciale au créateur. C'est peut-être un peu vieux maintenant (le dernier engagement a eu lieu en 2014), mais ça vaut toujours la peine de le vérifier. Voici une liste d'exemples de graphiques créés à l'aide de Flot.

amCharts

 amcharts

amCharts est sans aucun doute l'une des plus belles librairies du monde. Il se sépare parfaitement en 3 graphiques indépendants – les graphiques JavaScript, les cartes graphiques (amMaps) et les graphiques boursiers.

amMaps est mon préféré parmi les trois ci-dessus. Il fournit des fonctionnalités telles que le chargement d'icônes ou de photos sur votre carte, les cartes de chaleur, le traçage de lignes et l'ajout de texte sur les cartes, le zoom et autres.

amCharts utilise SVG pour rendre des graphiques fonctionnant dans les navigateurs modernes.

Consultez cette fantastique collection de démonstrations sympas créées à l'aide de amCharts.

La version gratuite d’amChart laissera un lien vers son site Web en haut de chaque graphique. Les licences commerciales sont un peu plus chères que la plupart des bibliothèques payantes sur le marché.

EJSCharts

 ejscharts

EJSCharts est la solution open source pour la représentation et la personnalisation des données domestiques et professionnelles. Les fabricants le décrivent comme une bibliothèque de graphiques prête pour l’entreprise. Les graphiques semblent propres et lisibles que la plupart des anciennes bibliothèques de graphiques. Découvrez cette liste d'exemples .

EJSCharts est disponible en versions gratuite et payante. La version gratuite vous limite à utiliser un maximum de 1 graphique par page et 2 séries par graphique. Jetez un coup d'oeil sur les détails de la tarification ici .

uvCharts

 uvcharts

uvCharts options Il dispose de 12 types de graphiques standard différents.

uvCharts est créé à l'aide de la bibliothèque D3.js. Il promet d'éliminer toutes les parties de codage difficiles de D3.js et de faciliter la mise en œuvre des types de graphiques standard. Les uvCharts sont rendus en utilisant SVG, HTML et CSS.

Plotly.js

 plotly_splash

Plotly.js est la première bibliothèque de graphiques JavaScript pour le Web. Il est open-source depuis 2015, ce qui signifie que tout le monde peut l'utiliser gratuitement. Plotly.js prend en charge 20 types de graphiques, y compris des histogrammes, des tracés 3D, des barres d’erreur et des cartes. Il peut également faire tous les graphiques de base tels que les diagrammes à barres, les graphiques linéaires et les camemberts.

Plotly.js utilise D3.js sous le capot. js par lui-même. Pour quelques exemples de graphiques réalisés avec Plotly.js, consultez le fil d'actualités de Plotly .

Conclusion

Il vous faut maintenant sélectionner la meilleure bibliothèque graphique pour vos projets futurs. Les développeurs qui aiment avoir tous les contrôles sur leurs cartes vont certainement opter pour D3.js. Presque toutes les bibliothèques ci-dessus ont un bon support via les forums Stack Overflow.

Si vous cherchez des outils pour générer des graphiques tout prêts, rendez-vous sur l'article 5 Tools for Creating Amazing Online Charts. Vous pouvez également lire Création de graphiques simples de lignes et de barres à l'aide de l'article D3.js pour commencer à utiliser D3.js. Nous avons également une série consacrée à l'utilisation de Google Charts avec Angular .

Il existe de nombreuses autres bibliothèques de diagrammes et de graphiques. Voici quelques points à vérifier:

  • GoJS est une bibliothèque de diagrammes JavaScript pour les organigrammes interactifs, les organigrammes, les outils de conception, les outils de planification et les langages visuels.
  • C3.js
  • dimple est une API orientée objet pour les analyses métier alimentées par d3
  • Charted par Medium, est un outil qui visualise automatiquement les données. Vous venez de lui donner un lien vers un fichier de données. (Vous pouvez en lire plus à ce sujet chez Medium .)

Enfin, voici quelques outils plus simples pour créer rapidement des infographies:

  • infogram facilite la création
  • Piktochart est un outil simple et intuitif qui vous aide à représenter différents types de données.
  • Easelly est un outil d'infographie simple qui vous permet de visualiser tout type d'information.




Source link