Comment créer un graphique simple avec Chart.js

À l’ère de la prise de décision axée sur les données, il est crucial de présenter ces données de manière claire et compréhensible. Les tableaux et les graphiques sont des outils précieux qui nous aident à saisir des informations complexes, à identifier les tendances et à déceler les schémas avec facilité.

Explorons ensemble comment concevoir un graphique simple en utilisant Chart.js, une bibliothèque JavaScript largement adoptée pour la visualisation de données.

Qu’est-ce que Chart.js ?

Chart.js est un outil gratuit, conçu pour aider les développeurs à générer des graphiques interactifs pour les applications web. Ces graphiques sont affichés via l’élément HTML5 canvas, ce qui assure leur compatibilité avec les navigateurs modernes.

Fonctionnalités de Chart.js

Voici quelques-unes de ses caractéristiques principales :

Chart.js se distingue par sa simplicité d’utilisation. Les développeurs peuvent créer des graphiques visuellement attrayants et interactifs avec une quantité minimale de code.
Cette bibliothèque polyvalente prend en charge une grande variété de types de graphiques, tels que les graphiques linéaires, à barres, circulaires et en radar. Elle répond ainsi à divers besoins en matière de représentation de données.
Chart.js est conçue pour que les graphiques s’adaptent parfaitement aux ordinateurs de bureau et aux appareils mobiles. Ils sont réactifs et adaptables.
De nombreuses options sont disponibles pour personnaliser les graphiques Chart.js au-delà de leurs paramètres par défaut. Les développeurs ont la possibilité d’ajuster les graphiques afin qu’ils répondent à des besoins spécifiques.

Configuration de l’environnement

Il existe deux méthodes principales pour configurer la bibliothèque :

Structure HTML de base

Pour intégrer un graphique, vous aurez besoin d’un élément canvas 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="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <h1>Bienvenue dans ma représentation de données</h1>
    <canvas id="myChart" width="400" height="150"></canvas>
    <script></script>
  </body>
</html>

Pour styliser la page, créez un fichier nommé « style.css », et ajoutez-y le code 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éation de votre premier graphique : exemple de graphique à barres

Pour cet exemple, nous allons utiliser un graphique à barres, qui est idéal pour comparer des valeurs distinctes par catégorie.

Dans la balise script au bas de votre code HTML, commencez par sélectionner l’élément canvas grâce à son identifiant (id) :
```
let canvas = document.getElementById('myChart');
```
Ensuite, récupérez le contexte de rendu pour votre graphique. Ici, il s’agit d’un contexte de dessin 2D :
```
let ctx = canvas.getContext('2d');
```
Initialisez ensuite un nouveau graphique sur le canevas grâce à la fonction `Chart()`. Cette fonction prend comme premier argument le contexte du canevas, suivi d’un objet contenant les options et les données à afficher sur le graphique :
```
let options = {};
let myChart = new Chart(canvas, options);
```

Enfin, complétez l’objet `options` pour spécifier le type de graphique, les données, ainsi que les libellés que vous souhaitez voir apparaître :

let options = {
  type: "bar",

  data: {
    labels: ["Rouge", "Bleu", "Jaune", "Vert", "Violet", "Orange"],

    datasets: [{
      label: "Nombre total de votes par couleur préférée",
      data: [12, 19, 3, 5, 2, 3],
    }],
  },
};

Pour l’instant, votre graphique ressemble à ceci :

Stylisation et personnalisation du graphique

Chart.js propose de nombreuses options pour personnaliser vos graphiques, parmi lesquelles :

Couleurs : Personnalisez les couleurs de vos graphiques, qu’il s’agisse du fond des barres ou des bordures des lignes.
Légendes : Positionnez les légendes en haut, en bas, à gauche ou à droite pour plus de clarté.
Infobulles : Utilisez les infobulles pour afficher des informations précises sur les points de données lors du survol.
Animations : Définissez le style et la vitesse des animations des graphiques pour un affichage dynamique.

Voici un exemple simple pour illustrer comment définir quelques styles de base pour votre jeu de données, en modifiant l’objet `options` comme suit :

let options = {
  type: "bar",

  data: {
    labels: ["Rouge", "Bleu", "Jaune", "Vert", "Violet", "Orange"],

    datasets: [{
      label: "Nombre total de votes par couleur préférée",
      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 :

Bonnes pratiques et conseils de performance

Pour garantir des performances optimales lors de l’affichage de graphiques :

Limitez le nombre de points de données dans vos graphiques 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 erreurs courantes

Voici quelques pièges à éviter :

Assurez-vous que vos données sont toujours formatées de manière cohérente afin d’éviter les surprises.
Il est préférable de limiter l’utilisation des animations pour améliorer les performances. Bien qu’elles puissent améliorer l’expérience utilisateur, en utiliser trop peut entraîner des problèmes.

Chart.js : une solution puissante pour la visualisation de données web

Chart.js est un outil précieux lorsque vous souhaitez présenter des données interactives de manière attrayante. Vous pouvez créer facilement de superbes visualisations de données qui fournissent des informations et facilitent la prise de décision.

Chart.js offre une solution solide pour la visualisation de données, que vous soyez un développeur expérimenté ou débutant.

0 Partages