Il existe quelques bibliothèques JavaScript pour tracer divers graphiques, allant des graphiques à barres aux graphiques linéaires, etc. Si vous apprenez à afficher des données dynamiquement sur votre site Web avec JavaScript, Chart.js est l'une de ces bibliothèques que vous devriez essayer.

Comment pouvez-vous commencer à créer des visualisations de données avec Chart.js? Vous apprendrez comment dans cet article.

Commençons.

Qu'est-ce que Chart.js ?

Chart.js est une bibliothèque JavaScript de visualisation de données open source utilisée pour tracer des graphiques pouvant être rendus en HTML. Il prend actuellement en charge huit types de graphiques interactifs différents que vous pouvez également animer. Pour créer un graphique basé sur HTML avec chart.js, vous avez besoin d'un canevas HTML pour le contenir.

La bibliothèque accepte un ensemble de jeux de données et d'autres paramètres de personnalisation tels que la couleur d'arrière-plan, la couleur de la bordure, etc. L'un des ensembles de données est le

étiqueter, qui représente les valeurs sur l'axe X. L'autre est un ensemble de valeurs numériques, qui se situent généralement sur l'axe Y.

Vous devez également spécifier le type de graphique dans l'objet graphique afin que la bibliothèque sache quel graphique tracer.

Comment créer des graphiques avec Chart.js

Comme nous l'avons mentionné précédemment, vous pouvez créer différents types de graphiques avec graphique.js. Pour ce didacticiel, vous commencerez par des graphiques linéaires et à barres. Une fois que vous aurez compris le concept sous-jacent, vous disposerez de tous les outils et de la confiance dont vous avez besoin pour tracer les autres graphiques disponibles.

En rapport:Comment rendre votre site Web réactif et interactif avec CSS et JavaScript

Pour commencer à utiliser graphique.js, créez les fichiers nécessaires. Pour ce didacticiel, les noms de fichiers sont graphique.html, plot.js, et index.css. Vous pouvez utiliser n'importe quelle convention de dénomination pour vos fichiers.

Maintenant, collez ce qui suit dans le diriger section de votre fichier HTML pour créer un lien vers le réseau de distribution de contenu Chart.js (CDN).

Dans graphique.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Ensuite, créez un canevas HTML pour contenir votre graphique et donnez-lui une identifiant. Connectez-vous également au fichier CSS (index.css) dans le diriger section et pointez vers votre fichier JavaScript (plot.js) dans la corps section.

La structure du fichier HTML ressemble à ceci :

 Graphiques

Et dans votre CSS:

corps{
 couleur d'arrière-plan :#383735 ;
}
h1{
 couleur :#e9f0e9 ;
 marge gauche: 43 % ;
}
#parcelles{
 marge: automatique ;
 couleur de fond: #2e2d2d ;
}

Le style CSS ci-dessus n'est pas une convention définie. Ainsi, vous pouvez styliser le vôtre comme vous le souhaitez en fonction de votre structure DOM. Une fois vos fichiers HTML et CSS prêts, il est temps de tracer vos graphiques avec JavaScript.

Le graphique linéaire

Pour créer un graphique en courbes avec graphique.js, vous définirez le graphique taper à ligne. Cela indique à la bibliothèque de dessiner un graphique en courbes.

Pour le démontrer, dans votre fichier JavaScript :

// Récupère le canevas HTML par son identifiant
parcelles = document.getElementById("parcelles");
// Exemples de jeux de données pour les axes X et Y
var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Jun", "Juil"]; // Reste sur l'axe X
var trafic = [65, 59, 80, 81, 56, 55, 60] // Reste sur l'axe Y
// Crée une instance de l'objet Chart:
nouveau graphique (parcelles, {
 tapez: 'ligne', //Déclarer le type de graphique
 Les données: {
 étiquettes: mois, //Données de l'axe X
 ensembles de données: [{
 trafic de données, //Données de l'axe Y
 backgroundColor: '#5e440f',
 borderColor: 'blanc',
 remplir: faux, //Remplit la courbe sous la ligne avec la couleur de fond. C'est vrai par défaut
 }]
 },
});

Sortir:

N'hésitez pas à changer le remplir valeur à vrai, utilisez plus de données ou ajustez les couleurs pour voir ce qui se passe.

Comme vous pouvez également le voir, il y a une petite boîte de légende en haut du graphique. Vous pouvez supprimer cela dans un fichier facultatif options paramètre.

le options Le paramètre aide également avec d'autres personnalisations en plus de supprimer ou d'inclure la légende. Par exemple, vous pouvez l'utiliser pour forcer un axe à démarrer à zéro.

Pour déclarer un options paramètre, voici à quoi ressemble la section graphique dans votre fichier JavaScript :

// Crée une instance de l'objet Chart :
nouveau graphique (parcelles, {
 tapez: 'ligne', //Déclarer le type de graphique
 Les données: {
 étiquettes: mois, //Données de l'axe X
 ensembles de données: [{
 trafic de données, //Données de l'axe Y
 backgroundColor: '#5e440f', //Couleur des points
 borderColor: 'blanc', //Couleur de la ligne
 remplir: faux, //Remplit la courbe sous la ligne avec la couleur de fond. C'est vrai par défaut
 }]
 },
 // Spécifiez les options personnalisées :
 option :{
 légende: {affichage: faux}, //Supprimez la boîte de légende en la définissant sur false. C'est vrai par défaut.
//Spécifiez les paramètres des échelles. Pour faire démarrer l'axe Y à partir de zéro, par exemple:
 Balance:{
 Axes y: [{ticks: {min: 0}}] // Vous pouvez répéter la même chose pour l'axe X s'il contient des entiers.
 }
 } 
});

Sortir:

Vous pouvez également utiliser différentes couleurs d'arrière-plan pour chaque point. Cependant, il est généralement plus utile de faire varier les couleurs d'arrière-plan de cette manière avec les graphiques à barres.

Faire des graphiques à barres avec Chart.js

Ici, il vous suffit de changer le graphique taper à bar. Vous n'avez pas besoin de définir le remplir car les barres héritent automatiquement de la couleur de fond :

// Crée une instance de l'objet Chart:
nouveau graphique (parcelles, {
 taper: 'barre', //Déclarer le type de graphique
 Les données: {
 étiquettes: mois, //Données de l'axe X
 ensembles de données: [{
 trafic de données, //Données de l'axe Y
 backgroundColor: '#3bf70c', //Couleur des barres
 }]
 },
 option :{
 légende: {affichage: faux}, //Supprimez la boîte de légende en la définissant sur false. C'est vrai par défaut.
 }
});

Sortir:

N'hésitez pas à forcer l'axe Y à partir de zéro ou de n'importe quelle valeur comme vous l'avez fait pour le graphique linéaire.

En rapport:Méthodes de tableau JavaScript que vous devez maîtriser

Pour utiliser des couleurs différentes pour chaque barre, transmettez un tableau de couleurs correspondant au nombre d'éléments dans vos données dans le champ Couleur de l'arrière plan paramètre:

// Crée une instance de l'objet Chart:
nouveau graphique (parcelles, {
 taper: 'barre', //Déclarer le type de graphique
 Les données: {
 étiquettes: mois, //Données de l'axe X
 ensembles de données: [{
 trafic de données, //Données de l'axe Y
//Couleur de chaque barre:
 Couleur de l'arrière plan: [
 "rgb (196, 190, 183)",
 "rgb (21, 227, 235)",
 "rgb (7, 150, 245)",
 "rgb (240, 5, 252)",
 "rgb (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 option :{
 légende: {affichage: faux}, //Supprimez la boîte de légende en la définissant sur false. C'est vrai par défaut.
 }
});

Sortir:

Faire un camembert avec Chart.js

Pour dessiner un graphique à secteurs, changez le type de graphique en tarte. Vous pouvez également définir l'affichage de la légende sur vrai pour voir ce que chaque segment du gâteau représente :

// Crée une instance de l'objet Chart :
nouveau graphique (parcelles, {
 type: 'pie', // Déclare le type de graphique
 Les données: {
 labels: mois, //Définit chaque segment
 ensembles de données: [{
 data: trafic, //Détermine la taille du segment
 //Couleur de chaque segment
 Couleur de l'arrière plan: [
 "rgb (196, 190, 183)",
 "rgb (21, 227, 235)",
 "rgb (7, 150, 245)",
 "rgb (240, 5, 252)",
 "rgb (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 option :{
 legend: {display: true}, // Ceci est vrai par défaut.
}
});

Sortir:

Comme vous l'avez fait dans les exemples ci-dessus, vous pouvez essayer d'autres graphiques en modifiant le taper.

Néanmoins, voici une liste des supports pris en charge graphique.js types de graphiques que vous pouvez essayer en utilisant les conventions de codage ci-dessus :

• bar
• ligne
• dispersion
• Donut
• tarte
• radar
• zonepolaire
• bulle

Jouez avec Chart.js

Bien que vous ne vous soyez familiarisé qu'avec les graphiques linéaires, à secteurs et à barres dans ce didacticiel, le modèle de code pour tracer d'autres graphiques avec chart.js suit la même convention. Alors n'hésitez pas à jouer avec les autres aussi.

Cela dit, si vous voulez plus que ce que propose chart.js, vous pouvez également jeter un œil à d'autres bibliothèques de graphiques JavaScript.

6 frameworks JavaScript qui valent la peine d'être appris

Il existe de nombreux frameworks JavaScript pour aider au développement. En voici quelques-unes que vous devriez connaître.

Lire la suite

A propos de l'auteur