GraphicsJS vous permet de créer tous les graphiques Web imaginables

API JavaScript personnalisées sont l'avenir du web. le mouvement open source associé à Graphiques SVG ont ouvert les possibilités pour les développeurs Web.

GraphicsJS est une bibliothèque open source gratuite et une API JS pour création de graphiques personnalisés dans les navigateurs Web. Il peut être utilisé comme un outil de visualisation pour représenter graphiquement des données, ou pour créer des trucs sympas juste pour montrer.

Sur la page d'accueil, vous trouverez un grande section de démos créé avec GraphicsJS. Et ces exemples ne font qu'effleurer la surface de ce qui est possible.

La bibliothèque utilise son propre DOM virtuel qui est une abstraction du DOM du navigateur. C'est un peu similaire au DOM virtuel de React et il est utilisé de manière similaire.

Comme cette bibliothèque utilise un clone du DOM, elle a besoin de vrais éléments HTML travailler sur. C'est pour ça utilise SVG / VML plutôt que des objets incorporés dans le canevas HTML5.

Ce moteur graphique était construit à l'origine dans la bibliothèque AnyChart. De là, c'était peaufiné et Open Source sous forme de sa propre API JS.

GraphicsJS supporte tous les principaux navigateurs, même depuis IE6 et Chrome 1.0.

Tout le code source est disponible dans le dépôt GitHub où vous pouvez télécharger une copie et fouiller si vous en avez le temps. Mais je pense que la meilleure façon d'apprendre est de plonger tête la première.

Vous pouvez parcourir le Docs de l'API mais je trouve généralement ces documents superflus. Les documents sont mieux utilisés lorsque vous en avez besoin rechercher une méthode ou un appel d'API spécifique faire référence.

Si vous venez juste de commencer, vous pouvez visiter le terrain de jeu hébergé sur le site Web de AnyChart. C'est un bel endroit pour trouver échantillons de code de travail pour décomposer la syntaxe.

Ou, si vous voulez vraiment commencer par le carré 1, le Guide de démarrage de GraphicsJS peut aider. Cela ressemble plus à la “officiel” la documentation donc ça va vous tenir la main pour un courbe d'apprentissage plus lisse par rapport aux documents de l'API.

Quoi qu'il en soit, j'adore le fait que GraphicsJS soit à source ouverte et publié dans la communauté des développeurs. C'est loin d'être une bibliothèque parfaite mais c'est l'un des meilleurs que nous ayons pour créer des graphiques SVG personnalisés à partir de rien.

Et pour passer à la vitesse supérieure, vous trouverez ci-dessous un exemple de ce que vous pouvez construire avec Graphics.js..