Il y a quelque chose de magique dans les graphiques. La courbe courbe révèle instantanément toute la situation - l'histoire du développement de l'épidémie, la panique ou une période de prospérité. Cette ligne éclaire, suscite l'imagination, convainc.
- Henry. D. Hubbard
La quantité de données avec laquelle vous devez travailler augmente constamment. Et plus il y a d'informations, plus il est difficile de les traiter. C'est pourquoi le sujet de la visualisation des données est devenu particulièrement populaire maintenant - sous la forme de graphiques, de graphiques, de tableaux de bord, de préférence interactifs. La présentation visuelle des données nous permet, à nous, les gens, de consacrer moins de temps et d'efforts à les visualiser, à les analyser et à les comprendre, ainsi qu'à prendre les bonnes décisions éclairées sur cette base.
Il est peu probable que quiconque nie que dans le Web HTML5 moderne, JavaScript est la technologie la plus universelle et la plus simple pour visualiser les données. Donc, si vous êtes engagé dans le développement frontal, alors vous avez probablement déjà traité la création de graphiques JS, ou vous le rencontrerez dans un avenir (prochain).
Il existe de
nombreuses bibliothèques JavaScript pour la construction de graphiques et de diagrammes, chacune (comme tout autre outil) a ses avantages et ses inconvénients. Pour vous faciliter la vie, j'ai décidé de vous parler de ceux que j'aime le plus. Je pense que les dix bibliothèques suivantes sont les meilleures bibliothèques JS pour créer des graphiques, et elles peuvent vraiment aider à résoudre presque toutes les tâches de visualisation de données. Parcourons la liste ensemble et assurez-vous que vous les connaissez au moins fondamentalement et que vous n'avez pas perdu de vue une bonne bibliothèque qui pourrait être utile dans les grands projets actuels ou futurs.
Eh bien, commençons: voici les meilleures bibliothèques JS pour la visualisation des données!
amCharts
amCharts est l'une des bibliothèques JavaScript utiles pour ceux qui recherchent une solution simple et en même temps flexible pour la visualisation des données.
Caractéristiques clés
- De nombreux types de graphiques différents, notamment des cartes interactives et des diagrammes de Gantt.
- La capacité d'analyser les données «en profondeur» (drilldown) et d'autres options interactives bien conçues.
- La documentation décrivant toutes les méthodes nécessaires est bien écrite, bien qu'à mon goût, ce ne soit pas très pratique à utiliser.
- Animation cool de graphiques.
- Intégration avec React, Angular, Vue, Ember, etc.
- Plugin prêt à l'emploi pour WordPress.
- Exportez des graphiques vers une image ou un fichier PDF.
- Graphiques en direct, personnalisation complète, fonctionnalités spéciales conformément aux normes W3C.
- Support technique complet pour tous les utilisateurs et priorité pour les clients disposant d'une licence.
- Clients: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT&T, etc.
Coût
Image de marque avec référence dans la version gratuite. Pour supprimer la marque, vous devez acheter une licence payante (à partir de 180 $), plus l'accès au support prioritaire est fourni.
En savoir plus sur amCharts
Anychart
AnyChart est une bibliothèque JS bien développée, légère et multifonctionnelle pour visualiser les données avec un rendu en SVG / VML. Permet aux développeurs Web de créer toutes sortes de graphiques et de tableaux pour une prise de décision ultérieure basée sur eux.
Caractéristiques clés
- Plus de 80 types de graphiques, y compris des graphiques conventionnels, des graphiques boursiers, des géovisualisations (cartes), ainsi que des graphiques de Gantt et des graphiques de réseau PERT.
- Il existe de nombreuses options de chargement des données: XML, JSON, CSV, API JS, Google Sheets, tableaux HTML.
- La possibilité de "plonger" dans les données du graphique (drilldown).
- Indicateurs techniques pour l'analyse technique et les annotations (outils de dessin) «prêts à l'emploi».
- Documentation complète et description de l'API, support réactif.
- Intégration avec Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS, etc. Pour les développeurs d'applications et de tableaux de bord dans Qlik, il existe une extension spéciale prête à l'emploi pour Qlik Sense.
- Beaucoup d'exemples prêts à l'emploi de graphiques, tableaux, tableaux de bord, ainsi que son propre bac à sable spécial avec code de saisie semi-automatique.
- Prise en charge des anciens navigateurs.
- Exportez des données dans différents formats, y compris des rapports PDF; Image Jpg, png, svg; Fichiers de données Excel (XLSX) ou CSV avec graphiques.
- Clients: Oracle, Microsoft, Citi, Samsung, Nokia, AT&T, Ford, Volkswagen, Lockheed Martin, etc.
Coût
La version filigrane est gratuite. Pour se débarrasser de la marque et avoir la possibilité d'utiliser AnyChart dans des projets commerciaux, vous devez acheter une licence (à partir de 49 $).
En savoir plus sur AnyChart
Chart.js
Chart.js est une bibliothèque JavaScript simple et en même temps assez flexible pour la visualisation de données, populaire parmi les concepteurs et développeurs Web. C'est une excellente solution de base pour ceux qui n'ont pas besoin d'une grande variété de types de graphiques et de paramètres individuels, mais qui en ont besoin pour que les graphiques soient nets, clairs et informatifs.
Caractéristiques clés
- 8 types de graphiques et de diagrammes: linéaire (ligne), linéaire avec des zones (zone), ligné (barre), circulaire (tarte), pétale "Radar" (radar), polaire (polaire), bulle (bulle) et nuage de points ( Scatter).
- Tous les types de graphiques peuvent être personnalisés et fournis avec une animation, et tous sont adaptatifs lorsque vous travaillez sur le réseau.
- La fonctionnalité peut être améliorée grâce à l'utilisation de plugins.
- Bonne documentation.
- Prise en charge via Stack Overflow.
- Prise en charge des navigateurs IE9 +.
Coût
Bibliothèque open source gratuite. Publié sous licence MIT.
En savoir plus sur Chart.js
Chartart.js
Chartist.js est une bibliothèque JS open source simple qui peut également être utilisée pour créer des graphiques et des diagrammes adaptatifs soignés. D'une manière générale, il est bien adapté à ceux qui n'ont besoin que de graphiques élémentaires à barres, à barres ou à secteurs et qui n'ont pas besoin de beaucoup de données en termes de visualisation des données. Belle apparence, et il n'y a pas besoin d'un grand nombre de toutes sortes de fonctionnalités.
Caractéristiques clés
- Seulement 3 types de graphiques: Line, Bar, Pie.
- Grande animation.
- La documentation de l'API contient toutes les informations nécessaires, mais il n'est pas très pratique de l'utiliser (préparez-vous à faire défiler beaucoup).
- Permet l'utilisation de plugins pour étendre les fonctionnalités.
- Il utilise SVG pour dessiner des graphiques.
- Prise en charge des anciens navigateurs.
Coût
Open-source, utilisation gratuite à toutes fins.
En savoir plus sur Chartist.js
D3.js
D3.js est une puissante bibliothèque open source de visualisation de données JavaScript. Il a plus de 20 000 fourchettes sur GitHub. À la base, D3 ressemble plus à un framework qu'à une bibliothèque. Travailler avec elle n'est pas si facile, surtout au début. Mais il existe de nombreuses ressources d'informations utiles sur D3. Et à la fin, avec l'aide de cette bibliothèque, vous pouvez créer des visualisations originales incroyables et des graphiques à partir de zéro, ce qui fait de D3 un outil vraiment utile.
Caractéristiques clés
- Il prend en charge de nombreux types de graphiques, bien plus que la grande majorité des autres bibliothèques JavaScript (y compris, par exemple, le diagramme de Voronoi).
- Cela prend du temps à maîtriser. Moins clair et évident que certaines des bibliothèques commerciales de la liste (par exemple AnyChart). Compensé par un grand nombre de tutoriels et une API vraiment cool.
- Combine de puissants composants de visualisation avec une approche basée sur les données pour manipuler le DOM.
- Déboguez facilement avec un outil de navigateur.
- Beaucoup d'exemples.
- Fonctions de génération de courbes.
- Interface graphique par glisser-déposer.
Coût
D3 est une bibliothèque open source pour la création de graphiques et de tableaux, qui est absolument gratuite pour une utilisation à n'importe quelle fin.
En savoir plus sur D3.js
Graphiques de fusion
FusionCharts est une autre bonne bibliothèque pour créer des graphiques et des diagrammes interactifs, avec des centaines d'exemples prêts à l'emploi. Les graphiques FusionCharts prennent en charge les données JSON et XML. Rendu - via HTML5 / SVG et VML.
Caractéristiques clés
- Des dizaines de types de cartes, 2D et 3D, et plus de 950 cartes couvrant tous les continents.
- Graphiques et cartes animés et entièrement interactifs.
- API serveur pour ASP.NET, PHP, Ruby on Rails.
- Compatible avec jQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java, etc.
- Un guide d'utilisation assez détaillé et une description de l'API.
- De nombreux exemples de graphiques et de tableaux de bord.
- Prise en charge des anciens navigateurs.
- Exportez en PNG, JPG et PDF.
- Support - via la base de connaissances et le forum communautaire.
- Support prioritaire illimité pour les utilisateurs qui achètent une licence.
- Clients: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe, etc.
Coût
Gratuit pour une utilisation non commerciale. Licences payantes pour usage commercial (à partir de 497 $).
En savoir plus sur FusionCharts
Graphiques Google
Google Charts est un excellent choix pour les projets dans lesquels la simplicité et la stabilité des graphiques sont préférables à des paramètres de personnalisation complexes et détaillés.
Caractéristiques clés
- Rendu graphique en HTML5 / SVG et VML.
- De nombreux exemples de graphiques, tableaux, tableaux de bord.
- Tous les graphiques sont interactifs, certains peuvent également être zoom et panoramique.
- Documentation complète.
- Prise en charge des anciens navigateurs.
- Support via FAQ, GitHub et forum.
Coût
Licence gratuite, mais le code source n'est pas ouvert. Il ne vous permet pas d'héberger des fichiers Google JS sur votre serveur, il peut donc ne pas vous convenir si vous travaillez avec des données sensibles.
En savoir plus sur les graphiques Google
Highcharts
Highcharts est l'une des bibliothèques JavaScript les plus polyvalentes et les plus populaires pour la création de graphiques et de diagrammes en HTML5, avec un rendu en SVG (VML). Il est léger, prend en charge une large sélection de différents types de visualisations et offre des performances élevées.
Caractéristiques clés
- Utilise du javascript pur. Les données peuvent être téléchargées en externe.
- Documentation digne et documentation de l'API de description, cas d'utilisateurs.
- Interactivité, y compris l'exploration (la capacité d'analyser les données "en profondeur").
- Peut être utilisé avec React, Angular, Meteor, .NET, iOS, etc.
- Exportez aux formats PNG, JPG, PDF et SVG.
- Prise en charge des utilisateurs de la version gratuite via le forum et Stack Overflow. Le support Premium par e-mail et Skype n'est disponible que pour les utilisateurs commerciaux qui possèdent la licence appropriée.
- Clients: Visa, Yahoo!, Facebook, Twitter, Groupon, Nokia, Ericsson, Mastercard, Yandex, etc.
Coût
Gratuit pour une utilisation non commerciale. Pour un usage commercial, vous devez acheter une licence (à partir de 50 $).
En savoir plus sur les Highcharts
Plotly.js
Plotly.js est une bibliothèque JavaScript de haut niveau, gratuite et open source. Construit sur D3.js et WebGL. Il peut être utilisé pour créer de nombreux types différents de visualisation de données, y compris, par exemple, des graphiques statistiques en trois dimensions.
Caractéristiques clés
- 20 types de graphiques et de graphiques qui peuvent être intégrés sur le site ou utilisés pour créer des présentations dynamiques.
- Il est utilisé comme une bibliothèque de graphiques basée sur un navigateur pour Python, R, MATLAB, l'abstraction des graphiques dans une structure JSON déclarative.
- Documentation API complète.
- Belle animation.
- Utilise React.
- Exportez des graphiques en PNG et JPG. L'exportation vers EPS, SVG et PDF est disponible par abonnement.
- De nombreux exemples prêts à l'emploi.
- Il peut fonctionner avec des feuilles de calcul Excel ou directement avec votre base de données.
- Forum de support.
Coût
Bibliothèque open source gratuite.
En savoir plus sur Plotly.js
Zingchart
ZingChart est un outil utile pour créer des graphiques interactifs et adaptatifs. Il s'agit d'une bibliothèque rapide et flexible qui facilite le travail avec les mégadonnées et la génération de graphiques avec de grandes quantités de données.
Caractéristiques clés
- Prend en charge plus de 30 types de graphiques et de tableaux.
- Entièrement personnalisable, avec des paramètres de conception à la CSS.
- Compatible avec jQuery, Angular, Node.js, PHP, etc.
- Travaillez avec des données en temps réel, rendu rapide d'ensembles de données de toute taille.
- Les données peuvent être chargées via des objets JS, JSON, CSV, PHP, AJAX, MySQL.
- Documentation API détaillée et assez lisible.
- Support gratuit et premium via le centre d'aide ZingChart, Stack Overflow, e-mail et chat.
- Clients: Microsoft, Boeing, Adobe, Apple, Cisco, Google, Alcatel, etc.
Coût
La licence de marque fournit gratuitement un accès complet à la bibliothèque ZingChart. Pour une utilisation commerciale, une licence payante est requise (à partir de 199 $).
En savoir plus sur ZingChart
Conclusion
J'ai donc répertorié les meilleures bibliothèques JavaScript pour la construction de graphiques et de diagrammes, du moins celles que je considère comme étant de premier ordre. Il serait très difficile de les comparer tous ensemble de manière exhaustive, en tenant compte de tous les paramètres. Chacun a ses avantages et ses inconvénients, et le choix dépend en grande partie des compétences du développeur, ainsi que de la tâche spécifique.
Bien sûr, il existe certaines fonctionnalités, des fonctionnalités qui rendent une bibliothèque plus rapide, ou plus jolie en termes de conception, ou plus flexible que d'autres. Mais, en fin de compte, il n'est pas si important de savoir quelles bibliothèques figurent sur la liste, car en fin de compte, la meilleure est celle qui répond le mieux à vos besoins spécifiques dans le cadre d'une seule tâche.
Mon conseil est de connaître au moins un peu toutes ces bibliothèques de premier plan: lorsque vous avez besoin de graphiques JS pour visualiser les données d'un projet particulier, il est très probable qu'une ou plusieurs d'entre elles vous conviennent le mieux. Si vous souhaitez traiter la liste de manière plus authentique, faites attention à la
comparaison sur Wikipedia .
Si vous avez besoin de visualiser des données sur des cartes interactives, où les tendances géographiques, les relations, les relations, les flux, etc. sont d'une importance capitale, lisez mon article précédent sur les
meilleures bibliothèques JavaScript pour géo-visualiser les données sous forme de cartes (il y a une
traduction en russe sur Habré) .
Passez une bonne journée et profitez de la visualisation des données en utilisant JavaScript!
Ceci est ma traduction de l'article sur les meilleures bibliothèques de cartographie JavaScript pour chaque besoin de visualisation de données que j'ai publié plus tôt sur Hacker Noon .