Débuter avec Chart.js Introduction

Normalement, les personnes ne veulent pas consulter une grande quantité de données qui leur sont présentées sous forme de texte ou de tableaux. Principalement parce que c'est ennuyeux, mais plus important encore, il est un peu plus difficile de traiter des nombres bruts. 

Par exemple, voici un tableau des dix pays les plus peuplés du monde:

Avec seulement dix pays dans cette table, il y a encore une très bonne chance que vous et les autres lecteurs sautiez complètement la table. Normalement, les gens ne regardent qu'un ou deux pays qui les intéressent. Si les mêmes données avaient été présentées sous forme de graphique à barres, il aurait fallu très peu de temps à quelqu'un pour se faire une idée approximative de la population de ces pays.. 

En outre, il sera beaucoup plus facile de comprendre les tendances ou les faits - par exemple, les États-Unis sont deux fois plus peuplés que le Bangladesh et la Chine compte environ dix fois plus d'habitants que la Russie - il suffit de regarder la longueur des barres dans le graphique..

Chart.js est une bibliothèque populaire que vous pouvez utiliser pour créer différents types de graphiques. Dans cette série, vous découvrirez tous les aspects importants de cette bibliothèque. Il peut être utilisé pour créer des graphiques sophistiqués et réactifs sur HTML5 Canvas.. 

La bibliothèque vous permet de mélanger facilement différents types de graphiques et données de tracé sur des échelles date / heure, logarithmiques ou personnalisées. La bibliothèque propose également des animations prêtes à l'emploi pouvant être appliquées lors du changement de données ou de la mise à jour des couleurs.. 

Commençons par l'installation, puis passons aux options de configuration et à d'autres aspects..

Installation et utilisation

Vous pouvez télécharger la dernière version de Chart.js depuis GitHub ou utiliser le lien CDN pour l'inclure dans vos projets. Vous pouvez également installer la bibliothèque en utilisant npm ou tonnelle à l'aide des commandes suivantes:

npm installer chart.js --save bower installer chart.js --save

La bibliothèque a deux versions différentes. La version normale, appelée Chart.js et Chart.min.js, vient avec la bibliothèque Chart.js et un analyseur de couleur. Si vous souhaitez utiliser cette version de la bibliothèque et décider d'utiliser l'axe des temps dans vos graphiques, vous devez inclure séparément la bibliothèque Moment.js avant d'utiliser Chart.js.. 

La version fournie, identifiée comme Chart.bundle.js  ou Chart.bundle.min.js, comprend déjà Moment.js. De cette façon, vous n'aurez pas besoin d'inclure deux fichiers distincts. Une chose à garder à l'esprit est de ne pas utiliser cette version si vous avez déjà inclus Moment.js dans votre projet. Cela peut entraîner des problèmes de version.

Une fois que vous avez déterminé la version de la bibliothèque que vous souhaitez utiliser, vous pouvez l'inclure dans vos projets et commencer à créer de superbes graphiques..

Créer un graphique

Représentons la table de population présentée dans l'introduction sous forme de graphique à barres. L’axe des Y servira à tracer la population et l’axe des x à ceux des pays. Nous commençons par créer une toile avec id PopChart.

La largeur et la hauteur permettent de déterminer les dimensions du graphique. Lors de la création de graphiques réactifs, les proportions du graphique sont déterminées par la largeur et la hauteur du canevas..

Ensuite, vous devez instancier le Graphique classe. Cela peut être fait en passant le noeud, l'instance jQuery ou le contexte 2d du canevas sur lequel vous voulez dessiner le graphique..

var popCanvas = $ ("# popChart"); var popCanvas = document.getElementById ("popChart"); var popCanvas = document.getElementById ("popChart"). getContext ("2d");

La seule chose que vous devez faire maintenant est de transmettre tous les paramètres au constructeur:

var barChart = new Chart (popCanvas, type: 'bar', données: étiquettes: ["Chine", "Inde", "États-Unis", "Indonésie", "Brésil", "Pakistan", "Nigeria", "Bangladesh", "Russie", "Japon"], jeux de données: [label: 'Population', données: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 142257519, 126451398], backgroundColor: 'rgba (255, 99, 132, 0.6)', 'rgba (54, 162, 235, 0.6)', 'rgba (255, 206, 86, 0.6)', 'rgba (75, 192, 192, 0.6) ',' rgba (153, 102, 255, 0.6) ',' rgba (255, 159, 64, 0.6) ',' rgba (255, 99, 132, 0.6) ',' rgba (54, 162, 235, 0,6) ',' rgba (255, 206, 86, 0,6) ',' rgba (75, 192, 192, 0.6) ',' rgba (153, 102, 255, 0.6) ']]);

L'objet passé dans le second paramètre contient toutes les informations nécessaires à Chart.js pour dessiner votre graphique. le type key est utilisé pour spécifier le type de graphique que vous voulez dessiner. Il peut avoir l'une des valeurs suivantes: ligne, bar, radar, polarArea, tarte, Donut, et bulle. Vous apprendrez sur tous ces types de graphiques dans cette série.

La clé de données contient les données réelles que vous souhaitez tracer. le Couleur de fond Cette touche permet de spécifier la couleur des différentes barres du graphique. Lorsque la couleur d'arrière-plan n'est pas spécifiée, la valeur par défaut 'rgba (0,0,0,0,1)' est utilisé. 

Chaque graphique possède également ses propres clés que vous pouvez utiliser pour contrôler son apparence. Voici le tableau créé par le code ci-dessus:

Dans la démonstration ci-dessus, vous pouvez survoler les barres pour voir la population exacte dans différents pays. Une autre chose à noter est que la taille du graphique n’est pas égale aux dimensions que nous avons spécifiées, mais qu’elle a toujours le même rapport de format.. 

Si vous voulez que les graphiques aient la même taille sur tous les périphériques, vous devez définir la valeur du sensible la clé de faux.

Options de configuration

La bibliothèque Chart.js vous offre la possibilité de personnaliser tous les aspects des graphiques que vous créez. Par exemple, vous pouvez modifier la couleur et la largeur des bordures des barres dans le graphique ci-dessus. Vous pouvez également modifier les info-bulles et la légende en modifiant la taille et la couleur de la police. Dans cette section, vous découvrirez différentes clés utilisées pour styliser ces éléments..

La bibliothèque dispose de quatre clés globales spéciales pouvant être utilisées pour modifier toutes les polices d’un graphique. Ces clés sont defaultFontFamily, defaultFontSize, defaultFontStyle, et defaultFontColor. La taille de la police est spécifiée en pixels et ne s'applique pas à radialeLigne étiquettes de points d'échelle. De même, defaultFontStyle ne s'applique pas au titre ou au pied de page de l'info-bulle.

Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'blue';

Le graphique suivant utilise les paramètres de police globaux ci-dessus. Changer l'apparence de cette façon peut vous aider à créer des graphiques qui correspondent à votre site Web avec style..

Vous pouvez également modifier la légende qui apparaît dans un graphique. Les options de configuration devront être passées dans la options.legend espace de noms. Vous pouvez également spécifier les options de légende globalement pour tous les graphiques à l'aide de Chart.defaults.global.legend. La position de la légende est contrôlée à l'aide de la touche position key, qui peut accepter l'une des quatre valeurs suivantes: Haut, la gauche, bas, et droite. Vous pouvez également afficher ou masquer la légende à l'aide de la touche afficher clé.

Outre la légende, vous pouvez également contrôler l'apparence de l'étiquette de la légende. Ses options de configuration sont définies sous la configuration de la légende à l'aide du bouton étiquette clé. La largeur de la boîte de couleur peut être spécifiée à l’aide des touches boxWidth clé. Si aucune valeur n'est spécifiée, la valeur par défaut 40 est utilisée. 

Les valeurs de famille de police, taille de police, couleur de police et style de police sont héritées de la configuration globale par défaut. Cependant, vous pouvez spécifier vos propres valeurs pour eux en utilisant taille de police, le style de police, famille de polices, et couleur de la police.

var barChart = new Chart (popCanvas, type: 'bar', données: données, options: légende: affichage: vrai, position: 'en bas', libellés: boxWidth: 80, fontColor: 'rgb (60, 180 , 100) ');

Vous pouvez contrôler la manière dont les info-bulles sont tracées localement pour un graphique à l'aide du bouton options.tooltips espace de noms. De même, Chart.defaults.global.tooltips peut être utilisé pour définir l'apparence des info-bulles de manière globale. Pour spécifier si les info-bulles doivent être présentées à l'utilisateur, vous pouvez utiliser le activée clé. Le mettre à faux désactive les info-bulles. La valeur par défaut de cette clé est vrai. 

Vous pouvez également contrôler le comportement d'affichage / masquage des info-bulles à l'aide du bouton couper clé. Lorsqu'il est réglé sur vrai, qui est également la valeur par défaut de cette clé, les info-bulles ne sont affichées que lorsque le pointeur de la souris interagit réellement avec les barres. Lorsqu'il est réglé sur faux, les info-bulles sont affichées en fonction du comportement spécifié par le mode clé. 

le mode key est utilisé pour déterminer quel élément est affiché dans l'info-bulle. Sa valeur par défaut est la plus proche. Cela signifie que lorsque vous définissez couper à faux, l'info-bulle s'affichera pour la barre la plus proche du pointeur de la souris.

Tout comme la légende, vous pouvez également contrôler la valeur des différentes propriétés basées sur des polices pour les info-bulles. La seule différence est que cette fois les valeurs devront être définies individuellement pour les éléments titre, corps et pied de page de l'info-bulle.. 

Par exemple, vous pouvez modifier les propriétés de police du corps de l’info-bulle en utilisant corpsFontFamily, bodyFontSize, bodyFontStyle, et bodyFontColor. Le titre et le pied de page de l'info-bulle ont également des propriétés supplémentaires appelées titleMarginBottom et footerMarginTop. Ils peuvent être utilisés pour ajouter un espace supplémentaire entre eux et le corps de l'info-bulle.. 

De même, vous pouvez ajouter un rembourrage supplémentaire aux côtés gauche / droit et haut / bas de l'info-bulle à l'aide de la touche xPadding et yPadding Propriétés.

Vous pouvez contrôler la taille de la flèche d’info-bulle en utilisant le bouton taille clé. L’arrière-plan des info-bulles peut être modifié à l’aide des touches Couleur de fond clé.

var barChart = new Chart (popCanvas, type: 'bar', données: données, options: info-bulles: angleRadius: 0, caretSize: 0, xPadding: 16, yPadding: 10, backgroundColor: 'rgba (0, 150, 100, 0.9) ', titleFontStyle:' normal ', titleMarginBottom: 15);

Les options ci-dessus masqueront le curseur comme taille est mis à 0. Voici une démo qui montre les options en action. Essayez de survoler les barres pour voir l'info-bulle personnalisée.

Dernières pensées

Ce didacticiel a fourni une introduction de base à la bibliothèque Chart.js et vous a montré comment l'utiliser pour créer des graphiques à barres. Vous avez également découvert différentes options de configuration pouvant être utilisées pour contrôler l’apparence de différents graphiques.. 

Bien que nous n'utilisions que des graphiques à barres dans le didacticiel, les options de configuration pourraient être appliquées à tous les types de graphique. Dans le prochain tutoriel, vous apprendrez plus en détail les graphiques à courbes et à barres..

JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..

Si vous avez des questions sur ce tutoriel, faites-le moi savoir dans les commentaires..

Notez que les données sur la population ont été extraites de ce recensement..