Chart.js est une bibliothèque JavaScript populaire pour la création de graphiques interactifs dans les navigateurs web. Elle offre une interface simple pour créer différents types de graphiques tels que les graphiques à barres, les graphiques circulaires, les graphiques en ligne, etc.
Afin de pouvoir utiliser chart.js il vous est nécessaire d’ajouter cette ligne de code dans vos travaux
<script src= »https://cdn.jsdelivr.net/npm/chart.js »></script>
Votre code se présentera comme telle ensuite :
<!DOCTYPE html>
<html lang= »en »>
<head>
<meta charset= »UTF-8″>
<meta name= »viewport » content= »width=device-width, initial-scale=1.0″>
<title>Chart.js Example</title>
<script src= »https://cdn.jsdelivr.net/npm/chart.js »></script>
</head>
<body>
<canvas id= »myChart » width= »400″ height= »400″></canvas>
<script>
// Votre code Chart.js va être ajouté ici
</script>
</body>
</html>
Dans la balise script vous pouvez introduire cet example de graphique :
<script>
// Récupérez le contexte du canvas
var ctx = document.getElementById(‘myChart’).getContext(‘2d’);
// Définissez les données du graphique
var data = {
labels: [‘Janvier’, ‘Février’, ‘Mars’, ‘Avril’, ‘Mai’],
datasets: [{
label: ‘Ventes mensuelles’,
data: [50, 80, 60, 120, 100],
backgroundColor: ‘rgba(75, 192, 192, 0.2)’, // Couleur de fond
borderColor: ‘rgba(75, 192, 192, 1)’, // Couleur de la bordure
borderWidth: 1 // Largeur de la bordure
}]
};
// Définissez les options du graphique
var options = {
scales: {
y: {
beginAtZero: true
}
}
};
// Créez le graphique à barres
var myBarChart = new Chart(ctx, {
type: ‘bar’,
data: data,
options: options
});
</script>
Alternatives à chart.js
D3.js : D3.js est une bibliothèque puissante qui offre un contrôle complet sur la création de visualisations de données. Elle est flexible, mais peut être plus complexe à prendre en main par rapport à Chart.js.
Plotly.js : Plotly.js permet de créer des graphiques interactifs et offre une grande variété de types de graphiques. Il est compatible avec plusieurs langages, dont JavaScript, Python et R.
Highcharts : Highcharts est une bibliothèque de graphiques interactive qui propose une large gamme de types de graphiques. Elle est facile à utiliser et offre des fonctionnalités avancées, bien que son utilisation gratuite puisse être soumise à des conditions particulières.
Chartist.js : Chartist.js est une bibliothèque légère qui se concentre sur la création de graphiques simples et réactifs. Elle est facile à utiliser et n’a pas de dépendances externes.
Google Charts : Google Charts propose une variété de graphiques et est relativement facile à intégrer. Il est maintenu par Google et offre une intégration facile avec d’autres services Google.
Lors du choix d’une bibliothèque, il est important de considérer la simplicité d’utilisation, la flexibilité, les fonctionnalités requises, la compatibilité avec d’autres technologies, et les performances pour s’assurer qu’elle correspond bien aux besoins spécifiques de votre projet.