Comment créer un graphique simple avec Chart.js

Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Visualiser les données d’une manière que les gens peuvent comprendre est très important à l’ère de la prise de décision basée sur les données. Les tableaux et graphiques nous aident à comprendre facilement des données, des tendances et des modèles complexes.

Vidéo MUO du jour DÉFILEZ POUR CONTINUER AVEC LE CONTENU

Voyons comment créer un graphique simple à l'aide de Chart.js, une bibliothèque JavaScript populaire pour la visualisation de données.

Qu’est-ce que Chart.js ?

Graphique.js est un outil gratuit qui aide les développeurs à créer des graphiques interactifs pour les applications Web. L'élément HTML5 canvas restitue les graphiques, leur permettant de fonctionner sur les navigateurs modernes.

Caractéristiques de Chart.js

Les fonctionnalités incluent :

Chart.js se distingue par son approche conviviale. Avec un minimum de code, les développeurs peuvent créer des graphiques interactifs et visuellement attrayants.
La bibliothèque est polyvalente et prend en charge différents types de graphiques tels que des lignes, des barres, des secteurs et des radars. Il peut répondre à divers besoins de représentation des données.
Chart.js conçoit des graphiques pour qu'ils fonctionnent correctement sur les ordinateurs de bureau et les appareils mobiles. Ils sont réactifs et adaptables.
Vous pouvez modifier les graphiques Chart.js en utilisant de nombreuses options au lieu des paramètres par défaut. Les développeurs peuvent affiner les graphiques pour répondre à des exigences spécifiques.

Configuration de l'environnement

Vous pouvez configurer la bibliothèque de deux manières :

Utiliser un CDN . Incluez simplement la balise de script suivante dans l'en-tête de votre document HTML.
```
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
```
Utilisation d'un gestionnaire de packages. Si vous préférez les gestionnaires de packages, vous pouvez installer Chart.js en utilisant npm, le gestionnaire de packages de nœuds :
```
 npm install chart.js
```
Ou fil:
```
 yarn add chart.js
```

Structure HTML de base

Pour intégrer un graphique, vous aurez besoin d'un élément canevas dans votre code HTML. Voici une structure de base :

 <!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
   <title>Document</title> 
   <link rel="stylesheet" href="./style.css" /> 
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
 </head> 
 
 <body> 
   <h1>Welcome to My Data Representation</h1> 
   <canvas id="myChart" width="400" height="150"></canvas> 
  <script></script> 
 </body> 
</html>

Pour styliser la page, créez un fichier, style.css , et ajoutez-y le CSS suivant :

 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap"); 
 
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html { 
  font-size: 62.5%; 
} 
 
body { 
  font-family: "Tilt Neon", sans-serif; 
  padding: 2rem 4rem; 
} 
 
h1 { 
  font-size: 3rem; 
  color: #333; 
  text-align: center; 
  padding: 3rem; 
}

Créer votre premier graphique : un exemple de graphique à barres

Pour cet exemple, nous utiliserons un graphique à barres, idéal pour comparer des points de données individuels par catégorie.

Dans le scénario balise en bas de votre code HTML, commencez par sélectionner l'élément canvas à l'aide de sa propriété id :
```
 let canvas = document.getElementById('myChart');
```
Ensuite, obtenez un contexte sur la façon de restituer votre graphique. Dans ce cas, il s'agit d'un contexte de dessin 2D.
```
 let ctx = canvas.getContext('2d');
```
Ensuite, initialisez un nouveau graphique sur le canevas à l'aide du Graphique() fonction. Cette fonction prend comme premier argument le contexte du canevas, puis un objet d'options incluant les données à afficher dans le graphique.
```
 let options = {}; 
let myChart = new Chart(canvas, options); 
```

Ensuite, remplissez l'objet Options pour spécifier le type de graphique, les données et les étiquettes que vous souhaitez dans votre graphique.

 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
    }], 
  }, 
};

Pour le moment, votre graphique ressemble à ceci :

Styliser et personnaliser le graphique

Chart.js propose une multitude d'options pour personnaliser les graphiques telles que :

Couleurs : Personnalisez les couleurs des graphiques, des arrière-plans de barres aux bordures de lignes, avec Chart.js.
Légendes : placez les légendes en haut, en bas, à gauche ou à droite pour plus de clarté.
Info-bulles : Utilisez les info-bulles pour obtenir des informations détaillées sur les points de données qui apparaissent au survol.
Animations : définissez le style et le rythme des animations des graphiques pour un affichage dynamique.

À titre d'exemple simple, vous pouvez définir certains styles de base pour votre ensemble de données en modifiant l'objet options comme suit :

 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: "rgba(75, 192, 192, 0.2)", 
      borderColor: "rgba(75, 192, 192, 1)", 
      borderWidth: 1, 
    }], 
  }, 
};

Votre graphique devrait maintenant ressembler à ceci :

mac os x ne peut pas être installé sur cet ordinateur

Meilleures pratiques et conseils en matière de performances

Pour garantir des performances optimales lors du rendu des graphiques :

Limitez les points de données utilisés dans Chart.js pour un rendu plus rapide et une meilleure expérience utilisateur.
Si vous mettez fréquemment à jour un graphique, utilisez la méthode destroy() pour supprimer l'ancien graphique avant d'en afficher un nouveau.

Conseils pour éviter les pièges courants

Voici quelques pièges à éviter :

Assurez-vous que vos données sont toujours formatées de la même manière pour éviter toute surprise.
Pour améliorer les performances, il est préférable de limiter les animations. Bien qu’ils puissent contribuer à améliorer l’expérience utilisateur, en utiliser trop peut entraîner des problèmes.

Chart.js : Renforcer la visualisation des données Web

Chart.js est un outil utile lorsque vous souhaitez afficher des données interactives de manière attrayante. Vous pouvez facilement créer de superbes visualisations de données qui fournissent des informations et éclairent les décisions.

Chart.js fournit une solution solide pour visualiser les données, que vous soyez expérimenté ou nouveau dans le développement.