Bibliothèques de graphiques JavaScript : 13 choix populaires

#1 – Graphique.js

Chart.js est une bibliothèque de graphiques pratique qui utilise <canvas> de HTML5 pour afficher les graphiques.

La bibliothèque est facilement le premier choix pour les projets simples, pour des raisons telles qu'elle est réactive par défaut, et vous pouvez également appliquer des effets d'animation en fonction du comportement de l'utilisateur.

Voici les 8 types de graphiques que vous pouvez créer avec Chart.js :

• Graphique en aires
• Diagramme à bandes
• Graphique à bulles
• Graphiques en anneau et en secteurs
• Graphique en ligne
• Types de graphiques mixtes
• Carte de la zone polaire
• Carte radar

En ce qui concerne la facilité d'utilisation, la syntaxe est simple, et même si vous n'avez jamais travaillé avec JavaScript auparavant, la création d'un nouveau graphique est simple.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Si vous souhaitez étendre les graphiques avec des fonctions dynamiques et la mise en commun des données, la bibliothèque dispose d'un système de plugins que vous pouvez utiliser pour ajouter de nouvelles fonctionnalités.

Chart.js Exemple

Voir la Pen Proof of concept : Chart.js with Background Gradient par Sven (@hofmannsven) sur CodePen.

Ressources supplémentaires Chart.js

• Chart.js + Next.js = De beaux tableaux de bord basés sur les données
• Premiers pas avec Chart.js ; Apprentissage basé sur les tâches

#2 – D3.js

Permettez-moi de commencer par dire que D3 est un outil de visualisation de données plutôt qu'une bibliothèque graphique traditionnelle.

D3 vous permet de spécifier un ensemble de données et de le lier au DOM, vous pouvez ensuite utiliser les fonctions des bibliothèques pour transformer ces données en une représentation visuelle unique. En ce qui concerne la présentation visuelle, D3 tire parti des tableaux HTML, SVG et <canvas> pour afficher les données sur une page.

Si vous avez déjà vu l'un de ces globes rotatifs géo-basés avec plusieurs points de données interactifs, il y a de fortes chances que cette présentation ait été construite avec D3. Cependant, cela fonctionne également bien pour des utilisations pratiques, telles que le tableau de base que vous pouvez voir dans la démo ci-dessous. En fin de compte, vous voudrez vous référer à la section officielle des didacticiels pour D3 pour explorer ses capacités plus complexes.

Exemple D3.js

Voir le graphique Pen D3 + ReactJS par Web Dev (@ronaldmarin) sur CodePen.

Ressources supplémentaires D3.js

• Tutoriel D3.js
• Construire une carte thermique de calendrier D3.js

#3 – Apache ECharts

L'une des raisons pour lesquelles Apache ECharts est si populaire est que vous avez accès à des centaines d'exemples de graphiques prédéfinis dès la sortie de la boîte. Vous pouvez le vérifier vous-même en visitant le répertoire Exemples. Cette page couvre des graphiques et des exemples dans des catégories telles que les lignes, les barres, les camemberts, les nuages ​​de points, les cartes thermiques, les graphiques et bien plus encore.

Et, chaque exemple contient des exemples de code JavaScript et TypeScript. Mais ce n'est pas tout, il y a des avantages concrets à utiliser cette bibliothèque. En voici quelques-uns :

• Flux de données. Vous souhaitez créer des graphiques interactifs avec des millions de points de données ? ECharts utilise WebSockets pour diffuser des données afin qu'elles puissent être chargées de manière asynchrone même avec des ensembles de données extrêmement volumineux.
• Adapté aux mobiles. Lorsque les utilisateurs visualisent un EChart sur leurs appareils mobiles, le graphique lui-même a été optimisé pour fournir des fonctionnalités interactives - zoom, panoramique et rendu SVG pour assurer la meilleure délivrabilité.
• Données dynamiques. Vous pouvez alimenter ECharts plusieurs points de données (séparés), et la bibliothèque animera automatiquement le graphique pour offrir aux utilisateurs une expérience interactive.
• Accessibilité. Apache ECharts (v4.0 et versions ultérieures) est conçu pour suivre les directives WAI-ARIA.

Vous pouvez également afficher vos graphiques sur votre site Web en utilisant un CDN externe.

Apache ECharts Exemple

Voir l'exemple Pen Apache Echart de Vale (@vsigno) sur CodePen.

Ressources supplémentaires Apache ECharts

• Créez un meilleur outil GitHub Insight en une semaine

#4 – Intrigue

Plotly est la société mère de Dash, une solution low-code pour le déploiement d'applications de données. Et ils développent leur propre bibliothèque graphique – Plotly – sur place.

Avec Plotly, vous pouvez créer les visualisations graphiques les plus élémentaires, mais la véritable puissance de la bibliothèque réside dans sa capacité à produire des graphiques basés sur des statistiques, des représentations de données 3D et des graphiques basés sur des données financières.

Il est disponible à la fois en tant que module Node.js, mais peut également être utilisé directement à partir d'un CDN.

Exemple d'intrigue

Voir l'annotation Pen Add on click event par plotly (@plotly) sur CodePen.

#5 – Frappé

La bibliothèque de graphiques Frappe est créée par les personnes qui ont créé Frappe Framework. Cette bibliothèque est aussi simple que possible. Et cette simplicité est un facteur majeur qui contribue à la popularité de la bibliothèque.

La bibliothèque ne nécessite aucune dépendance externe et peut afficher des graphiques SVG adaptés aux mobiles en quelques lignes de code seulement. Voici un exemple de code pour un graphique Axis de base :

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

Et ce petit extrait se traduirait par un graphique comme celui-ci :

Il existe également une prise en charge des graphiques mixtes (plusieurs graphiques en un), des annotations, des cartes thermiques et une API est disponible si vous prévoyez de mettre à jour les données en temps réel ou de les exporter.

Exemple de frappe

Voir le Pen Frappe Hello World de Jang Rush (@weakish) sur CodePen.

#6 – Graphiques Apex

ApexCharts est une bibliothèque graphique traditionnelle. La principale différence entre ApexCharts et Frappe (par exemple) est qu'ApexCharts fournit un peu plus de démos. Mais offre également une prise en charge native des frameworks populaires tels que React, Vue et Angular. Cela signifie également que tous les graphiques de démonstration ont leurs échantillons respectifs écrits dans la syntaxe desdits frameworks.

En ce qui concerne les fonctionnalités, tous les graphiques sont générés au format SVG et sont compatibles avec les mobiles par défaut. Vous pouvez également tirer parti de fonctionnalités telles que des animations fluides et des annotations, et personnaliser la palette de thèmes de votre graphique en choisissant l'un des 10 exemples de styles.

Exemple d'ApexCharts

Voir le tableau de bord en temps réel du stylet par ApexCharts (@apexcharts) sur CodePen.

#7 – G2

J'ai récemment parlé d'Ant Design à plusieurs reprises, notamment dans mes articles sur les bibliothèques de composants pour React.js et Vue. Non seulement Ant est extrêmement populaire sur GitHub, mais les communautés les adorent dans toutes les régions du monde.

Et la bibliothèque de graphiques G2 (ou comme ils l'appellent « grammaire de visualisation ») est la mise en œuvre par Ant Design d'un système de cartographie utilisant le système de conception Ant. Je vous recommande vivement de consulter la page d'accueil d'AntV, où vous trouverez de nombreuses autres bibliothèques relatives à la visualisation de données en temps réel.

Il est le plus souvent utilisé pour créer des éléments tels que des tableaux de bord d'administration, créer des chemins de données et créer des exemples de visualisation de données interactives à l'aide de son moteur de rendu. Ce moteur peut rendre des graphiques et des vecteurs de données via WebGL, Canvas et SVG. Et parce que la bibliothèque est enfichable, vous pouvez encore améliorer vos présentations de graphiques grâce à des bibliothèques plus robustes comme D3.js (que nous avons vu plus tôt).

#8 – RoughViz

La bibliothèque roughViz de Jared Wilber est une combinaison de 3 bibliothèques différentes : D3.js, Rough.js et handy - un processeur de croquis dessinés à la main. Comme vous pouvez le constater à partir de l'exemple de capture d'écran ci-dessus, il ne s'agit pas de votre bibliothèque graphique habituelle. roughViz est entièrement conçu dans le but de vous aider à créer des graphiques de style croquis dessinés à la main à l'aide de JavaScript.

Ce type de bibliothèque sera un excellent complément aux projets personnels, en d'autres termes, des projets qui nécessitent une étincelle plus créative que l'approche traditionnelle de style professionnel. Et la syntaxe elle-même est aussi simple que possible, tout à fait conforme à Frappe et ApexCharts.

Vous pouvez le voir par vous-même dans la démo ci-dessous.

RoughViz Exemple

Voir la démo Pen RoughViz par Danny Englishby (@DanEnglishby) sur CodePen.

#9 - Graphiques légers

Si vous travaillez sur un projet lié à la finance (ou à la crypto-monnaie d'ailleurs), il est clair que la plupart des bibliothèques de graphiques mentionnées précédemment ne suffiront pas. En tant que tel, voici Lightweight Charts - une bibliothèque de graphiques conçue spécifiquement pour afficher des graphiques et des graphiques basés sur la finance.

Non seulement cette bibliothèque est open source et légère, mais elle contient également toutes les fonctionnalités nécessaires qui seraient nécessaires pour afficher des données graphiques sur les finances et leur structure dynamique.

L'une de ces fonctionnalités est le streaming de données, qui vous permet de transmettre des données en temps réel à votre canevas, puis de les mettre à jour sans que l'utilisateur ait besoin d'actualiser la page. Et un autre facteur que vous pouvez prendre en compte est la performance, qui ne devrait pas être un problème, comme expliqué sur la page d'accueil de cette bibliothèque,

« Nos solutions graphiques ont été conçues dès le départ pour fonctionner avec d'immenses baies de données. Les graphiques restent réactifs et agiles même avec des milliers de barres, même avec des mises à jour plusieurs fois par seconde avec de nouveaux ticks.

Découvrez la démo ci-dessous pour vous faire une idée, mais aussi de nombreuses options et fonctionnalités du graphique.

Exemple de graphiques allégés

Voir le graphique avancé Pen tradingview de truong (@truong160196) sur CodePen.

Graphiques allégés Ressources supplémentaires

• Tableaux financiers pour votre application

#10 - Panneau d'affichage

Billboard est une bibliothèque de graphiques d'interface basée sur D3. Il possède toutes les fonctionnalités modernes que vous attendez - rendu SVG, prise en charge tactile pour les appareils mobiles, une interface simple et une excellente documentation API.

Cependant, ma fonctionnalité préférée, et sans doute pour beaucoup d'autres également, est que Billboard fournit plus de 230 exemples de graphiques que vous pouvez créer avec cette bibliothèque. Ces exemples sont divisés en catégories de graphiques telles que Basique, Axe, Données, Grille, Interaction, Région et bien d'autres.

Cela signifie que vous pouvez non seulement trouver le bon type de graphique pour votre projet et ses exigences, mais vous pouvez également explorer d'autres options et voir si un exemple particulier retient votre attention.

Billboard.js Exemple

Voir les demandes de graphique de stylo - Billboard.js par DTCC (@dtcc) sur CodePen.

#11 – Point de vue

Perspective est l'un des projets gérés par FINOS (Open-Source Fintech), et FINOS lui-même fait également partie de la Linux Foundation. Tout comme Lightweight Charts - Perspective.js est orienté vers la fourniture de solutions graphiques pour les projets financiers. Cependant, il est capable de bien plus que cela et est fréquemment utilisé dans des projets liés au commerce électronique, aux grilles de données et à la segmentation des expéditions.

Si vous avez déjà vu des graphiques sur Covid-19, les aéroports et les grands événements sportifs comme les Jeux olympiques, il y a de fortes chances que l'intégration de l'interface et du flux de données ait été réalisée avec Perspective. Il dispose d'une interface utilisateur riche, optimisée pour les flux de données et l'analyse complexe en temps réel.

Il est disponible pour les développeurs JavaScript et Python et utilise le composant Web Custom Elements.

#12 - Tableau de l'interface utilisateur de Toast

Si quoi que ce soit, la bibliothèque de graphiques Toast UI est encore un autre choix à considérer en ce qui concerne les styles de graphique et leur conception. La fonctionnalité ici est très similaire aux bibliothèques que nous avons déjà examinées.

Je pense que le domaine dans lequel Toast UI diffère des autres choix est sa spécification API. C'est probablement l'une des meilleures API sur lesquelles vous pouvez mettre la main, et elle est accompagnée d'une documentation détaillée gratuite. L'une des fonctionnalités de l'API est Instances , un moyen pour vous de modifier dynamiquement les données du graphique, soit parce que votre source de données a changé, soit en raison de l'entrée de l'utilisateur.

Les types de graphiques pris en charge par Toast incluent les barres, les colonnes, les lignes, les zones, les bulles, les arborescences, les radars, les barres radiales et autres. La meilleure façon d'utiliser cette bibliothèque est via npm, mais un CDN est disponible, et tout ce que vous avez à faire est de spécifier un conteneur div id="chart" pour l'endroit où vous souhaitez afficher le graphique.

#13 – Re-graphiques

Si vous travaillez principalement avec React.js, la bibliothèque Recharts est construite sur D3.js avec React. Il respecte l'architecture native des composants React.js, et les graphiques créés avec Recharts peuvent être découplés et réutilisés en tant que composants individuels sur les pages dont vous avez besoin.

Tous les exemples de graphiques ont leur structure de composants pré-écrite au cas où vous voudriez les essayer dans un projet existant. La bibliothèque a été publiée pour la première fois en 2016 mais est toujours en développement actif.

Exemple de graphiques

Voir les Pen ReCharts de binu (@binutomy) sur CodePen.