Fermer

mai 14, 2019

18+ bibliothèques JavaScript pour créer de superbes graphiques


Il est pratiquement impossible d’imaginer un tableau de bord sans graphiques et tableaux. Ils présentent des statistiques complexes rapidement et efficacement. En outre, un bon graphique améliore également la conception générale de votre site Web.

Dans cet article, je vais vous montrer certaines des meilleures bibliothèques JavaScript pour les graphiques et les diagrammes. Ces bibliothèques vous aideront à créer de superbes graphiques personnalisables pour vos projets futurs.

Bien que la plupart des bibliothèques soient gratuites et à code source ouvert, certaines d’entre elles fournissent une version payante avec des fonctionnalités supplémentaires.

Cet article a été mis à jour. en mai 2019 pour refléter l'état actuel des bibliothèques de graphiques JavaScript.

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

 D3 - Bibliothèques de graphiques JavaScript

Quand on songe à cartographier aujourd'hui, D3. js est le premier nom qui apparaît. En tant que projet open source, D3.js apporte de nombreuses fonctionnalités puissantes qui manquaient dans la plupart des bibliothèques existantes. Des caractéristiques telles que propriétés dynamiques Entrée et sortie transitions puissantes et la familiarité avec la syntaxe avec jQuery 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 à beaucoup d’autres bibliothèques JavaScript, D3.js n’est livré avec aucun graphique prédéfini. Cependant, vous pouvez consulter la liste des graphes construits avec D3.js pour avoir une vue d'ensemble. Comme vous pouvez le constater, D3.js prend en charge une grande variété de types de graphiques.

Un inconvénient pour les débutants pourrait être sa courbe d'apprentissage abrupte, mais il existe de nombreux tutoriels et ressources pour vous aider à démarrer.

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

Si vous souhaitez apprendre D3.js, nous avons un livre sur la visualisation de données avec D3 .

Google Charts

 Google Charts - Bibliothèques graphiques JavaScript

Google Charts est un excellent choix pour les projets simples ne nécessitant pas de personnalisation complexe. Il fournit de nombreux graphiques prédéfinis tels que des graphiques en aires, des graphiques à barres, des graphiques en calendrier, des graphiques à secteurs, des graphiques géographiques, etc. Tous les graphiques sont interactifs et vous pouvez les ajouter à votre page en quelques minutes.

Google Charts propose également diverses options de personnalisation permettant de modifier l'aspect du graphique. Les graphiques sont rendus à l'aide de HTML5 / SVG pour assurer la compatibilité entre navigateurs et la portabilité entre plates-formes vers les iPhones, les iPad et Android. Il inclut également le langage VML pour la prise en charge des versions antérieures d’IE.

Voici une excellente liste construite à l’aide de Google Charts .

ChartJS

 Chart.js - Bibliothèques graphiques JavaScript

ChartJS fournit de superbes conceptions plates pour les graphiques. Il utilise l'élément HTML5 Canvas pour le rendu et prend en charge tous les navigateurs modernes (IE11 +).

Les graphiques ChartJS sont réactifs par défaut. Ils fonctionnent bien sur mobile et tablettes. Il existe 8 types de cartes différentes (Ligne, Barre, Radar, Beignet et Pie, Zone polaire, Bulle, Dispersion, Zone), ainsi que la possibilité de les mélanger. Tous les graphiques sont animés et personnalisables.

Voici une liste d'exemples élaborés construite avec ChartJS .

Chartist.js

 Les bibliothèques de diagrammes JavaScript - Graphiques

Chartist.js fournit beaux graphiques réactifs. Tout comme ChartJS, Chartist.js est le produit d’une communauté frustrée par l’utilisation de bibliothèques de graphiques JavaScript très onéreuses. Il utilise SVG pour rendre les graphiques. Il peut être contrôlé et personnalisé via les requêtes de médias CSS3 et Sass. Notez également que Chartist.js fournit des animations intéressantes qui ne fonctionneront que sur les navigateurs modernes.

Vous pouvez explorer et jouer avec différents types de graphiques à la page d’Exemples Chartist.js . Les cartes sont interactives et vous pouvez les éditer à la volée.

Recharts

 recharts - Bibliothèques de cartes JavaScript

Recharts est une bibliothèque de diagrammes composable permettant de construire des cartes avec des données découplées, réutilisables. Réagir aux composants. Il est construit sur des éléments SVG et D3.js. Consultez la liste d'exemples .

Les graphiques n3

 n3charts - Bibliothèques de graphiques JavaScript

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 diverses cartes standard sous la forme de directives angulaires personnalisables.

Consultez cette liste de cartes construite à l'aide de cartes n3 .

Graphiques de braise

 Embercharts - Bibliothèques de graphiques JavaScript

Ember Charts est une autre grande bibliothèque open source construite avec D3.js et Ember.js. Il fournit des séries chronologiques, des barres, des secteurs et des graphiques à dispersion faciles à personnaliser.

ZingChart

 zingchart - Bibliothèques de graphiques JavaScript

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

ZingChart propose plus de 35 types de graphiques réactifs et modules, qui peuvent également être affichage des données en temps réel. Ils peuvent être stylés et thématisés par CSS et permettre le rendu rapide des données volumineuses.

Vous pouvez consulter leur riche ensemble d'exemples .

Une version de marque, avec toutes les cartes, est disponible pour essai gratuit, mais pour une sortie sans filigrane, vous devez acheter l'une des licences payantes de ZingChart en fonction de la taille de votre entreprise.

Highcharts

 HighCharts - JavaScript chart bibliothèques

Highcharts est une autre bibliothèque très populaire pour la création de graphiques. Il contient de nombreux types d'animations sympas suffisantes pour attirer de nombreux yeux sur votre site Web. À l’instar des autres bibliothèques, Highcharts est livré avec de nombreux graphiques prédéfinis tels que spline, aire, aire, secteur, colonne, barre, secteur, dispersion, etc. Les graphiques sont réactifs et compatibles avec les appareils mobiles. En outre, Highcharts offre des fonctionnalités avancées telles que l’ajout d’annotations à vos graphiques.

L'un des principaux avantages de Highcharts est sa compatibilité avec les anciens navigateurs, même depuis Internet Explorer 6. Les navigateurs standard utilisent SVG pour le rendu graphique. Dans les versions précédentes d'Internet Explorer, les graphiques étaient dessinés à l'aide de VML.

Il existe des wrappers pour les langages les plus courants (.NET, PHP, Python, R et Java) et les frameworks (Angular, Vue et React) et pour iOS et Android.

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

FusionCharts

 Fusioncharts - Bibliothèques de cartes JavaScript

FusionCharts est l'un des modèles les plus populaires. Les plus anciennes bibliothèques de graphiques JavaScript, publiées depuis 2002. Avec plus de 100 graphiques et plus de 1 400 cartes, il est facile de dire que FusionCharts est la bibliothèque de graphiques JavaScript la plus complète. Il offre des intégrations avec tous les frameworks JavaScript et langages de programmation côté serveur courants. Les graphiques sont rendus avec HTML5 / SVG et VML pour une meilleure portabilité et compatibilité avec les navigateurs plus anciens, même depuis Internet Explorer 6. Cette rétrocompatibilité en faisait un choix très populaire depuis longtemps. Vous pouvez exporter les graphiques aux formats JPG, PNG, SVG et PDF.

Vous pouvez utiliser la version en filigrane de FusionCharts dans des projets personnels. Cependant, vous devez acheter une licence commerciale pour supprimer le filigrane.

Flot

 Flot - Bibliothèques de cartes JavaScript

Flot est une bibliothèque de cartographies 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 ceux-ci. Il est également compatible avec les anciens navigateurs – retour à IE6 et Firefox 2.

Flot est totalement gratuit. Voici une liste d'exemples de graphiques créés à l'aide de Flot.

amCharts

 amCharts - Bibliothèques de cartes JavaScript

amCharts [19659509] est sans aucun doute l'une des plus belles bibliothèques de graphes là-bas. Il offre à la fois des cartes et des cartes géographiques (carte), qui permettent une visualisation avancée des données.

Le paquet Carte est très impressionnant. Il vous permet de créer toutes sortes de cartes interactives avec quelques lignes de code. Certaines des fonctionnalités intéressantes de ce package incluent des projections de carte, un déplacement de coordonnées et des cartes thermiques. Il existe de nombreuses cartes fournies et vous pouvez également créer les vôtres.

amCharts utilise SVG pour générer des graphiques fonctionnant dans tous les navigateurs modernes. Il fournit des intégrations avec les applications JavaScript TypeScript, Angular, React, Vue et JavaScript simple.

Découvrez ce fantastique fantastique collection de démos créées avec amCharts .

La version gratuite d’amChart laissera un lien retour à son contenu. site Web sur le dessus de chaque graphique.

EJSCharts

 ejscharts - Bibliothèques de cartes JavaScript

EJSCharts est une solution open source de représentation et de personnalisation de données domestiques et professionnelles. Les graphiques sont propres, lisibles et interactifs. EJSCharts est compatible avec les anciens navigateurs de retour à IE6. Découvrez cette liste d'exemples .

uvCharts

 uvcharts - Bibliothèques de cartes JavaScript

uvCharts est une bibliothèque de graphiques JavaScript à code ouvert qui prétend avoir 100 + options de personnalisation. Il contient 12 types de graphiques standard différents.

uvCharts est construit avec D3.js. Il promet d'éliminer toutes les parties de codage difficiles de D3.js et fournit des implémentations faciles des types de graphiques standard. Les uvCharts sont générés avec SVG et HTML5, ce qui ne fonctionne que sur les navigateurs modernes.

Plotly.js

 plotlyjs - Bibliothèques de cartes JavaScript

Plotly.js est le premier JavaScript scientifique bibliothèque de cartographie 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 graphique, y compris les cartes SVG, les graphiques 3D et les graphiques statistiques. Il est construit au sommet de D3.js et de stack.gl .

CanvasJS

 Canvas - Bibliothèques de cartes JavaScript

CanvasJS

 est une bibliothèque sensible en HTML5. avec de hautes performances et une API simple. Il prend en charge 30 types de graphiques différents (y compris ligne, colonne, barre, surface, spline, camembert, graphique en anneau, graphiques empilés, etc.), qui sont bien documentés. Tous les graphiques incluent des fonctionnalités interactives telles que les info-bulles, le zoom, le panoramique, l’animation, etc. CanvasJS peut être intégré aux frameworks courants (Angular, React et jQuery) et aux technologies côté serveur (PHP, Ruby, Python, ASP.Net, Node.JS). , Java). </p>
<p> Voici une <a href= collection interactive d’exemples de graphiques CanvasJS

.

Tableau des interfaces TOAST

 toastuichart - Bibliothèques de tableaux JavaScript

] est une bibliothèque de graphiques JavaScript open source prenant en charge les navigateurs existants, y compris IE8. Il inclut tous les types de cartes et cartes courants, qui peuvent être personnalisés avec des thèmes définis par l'utilisateur. Les graphiques peuvent également être combinés dans des graphiques combinés, par exemple colonne avec ligne ou ligne avec zone, etc. Consultez la liste complète d'exemples .

AnyChart

 AnyChart - Bibliothèques de graphiques JavaScript

AnyChart est une bibliothèque de graphes JavaScript légère et robuste, dotée de graphiques conçus pour être intégrés et intégrés. AnyChart vous permet d'afficher 68 graphiques prédéfinis et fournit des fonctionnalités pour créer vos propres types de graphique. Vous pouvez enregistrer un graphique en tant qu'image au format PDF, PNG, JPG ou SVG.

AnyChart fournit aux utilisateurs cinq types de ressources pour apprendre la bibliothèque (documentation, référence d'API, Playground, Chartopedia et FAQ).

Vous pouvez télécharger une version en filigrane gratuitement après votre inscription. Toutefois, pour vous débarrasser de la marque et utiliser AnyChart à des fins commerciales, vous devez acheter une licence.

Conclusion

Vous devez à présent choisir la meilleure bibliothèque de graphiques pour vos projets futurs. Les développeurs qui souhaitent avoir le contrôle complet de leurs graphiques opteront certainement pour D3.js. Presque toutes les bibliothèques ci-dessus bénéficient d'un bon support via les forums Stack Overflow.

Si vous recherchez des outils pour générer des graphiques prêts à l'emploi, consultez l'article 5 Outils pour la création de graphiques étonnants en ligne . Vous pouvez également lire Créer des diagrammes simples en barres et à barres en utilisant D3.js pour commencer à utiliser D3.js. Nous avons également une série consacrée à l'utilisation de Google Charts with Angular et un livre: Introduction à la visualisation de données avec D3 .

Il existe de nombreuses autres bibliothèques de cartographie et de graphisme sur Là.

  • GoJS est une bibliothèque de création de diagrammes en JavaScript pour diagrammes, organigrammes, outils de conception, outils de planification, langages visuels interactifs.
  • C3.js est un logiciel basé sur D3. bibliothèque de diagrammes réutilisable.
  • dimple est une API orientée objet pour les analyses commerciales optimisée par D3.
  • Charted par Medium, est un outil permettant de visualiser automatiquement les données. Vous venez de lui donner un lien vers un fichier de données. (Vous pouvez en lire plus sur Medium .)
  • Les graphiques Smoothie peuvent être utiles si vous utilisez des données en temps réel.
  • Chartkick.js une bibliothèque qui vous permet de créer de beaux graphiques avec une ligne de JavaScript.
  • Morris.js est une puissante bibliothèque avec une interface épurée. Il vous permet de créer facilement de beaux graphiques. C’est basé sur jQuery et la bibliothèque JavaScript Raphaël.

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

  • infogram facilite la création d'infographies attrayantes et de rapports en quelques minutes:
  • Piktochart est un outil simple et intuitif qui vous aide à: représentent différents types de données.
  • Easelly est un constructeur d'infographie simple qui vous permet de visualiser tout type d'informations.

Si vous avez besoin d'améliorer vos compétences en JavaScript, vous pouvez également consulter plusieurs livres JavaScript . dans notre bibliothèque.




Source link