Exemples de Graphiques Chart.js : Barres, Lignes et Camemberts

Ce fichier HTML contient des exemples complets de graphiques Chart.js (barres, lignes, camembert) avec le code commenté. Téléchargez-le et ouvrez-le dans votre navigateur pour voir les graphiques en action.

À savoir : Assurez-vous d'avoir une connexion internet pour charger Chart.js depuis le CDN, ou téléchargez la bibliothèque localement.

Comment utiliser cette ressource

1. Téléchargez le fichier HTML ci-dessous.
2. Ouvrez-le dans un navigateur moderne.
3. Modifiez les données dans le code JavaScript pour les adapter à vos besoins.

Graphique en barres

Le premier exemple montre un graphique en barres avec des données simples.

Graphique en lignes

Le deuxième exemple illustre un graphique en lignes pour des séries temporelles.

Graphique en camembert

Le troisième exemple présente un camembert pour des proportions.

Version à copier et adapter

Exemples Chart.js Exemples de graphiques Chart.js // Graphique en barres const ctxBar = document.getElementById('barChart').getContext('2d'); new Chart(ctxBar, { type: 'bar', data: { labels: ['Janvier', 'Février', 'Mars'], datasets: [{ label: 'Ventes', data: [12, 19, 3], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: {} }); // Graphique en lignes const ctxLine = document.getElementById('lineChart').getContext('2d'); new Chart(ctxLine, { type: 'line', data: { labels: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven'], datasets: [{ label: 'Température', data: [15, 18, 20, 22, 19], borderColor: 'rgba(255, 99, 132, 1)', fill: false }] }, options: {} }); // Graphique en camembert const ctxPie = document.getElementById('pieChart').getContext('2d'); new Chart(ctxPie, { type: 'pie', data: { labels: ['Rouge', 'Bleu', 'Jaune'], datasets: [{ data: [10, 20, 30], backgroundColor: ['red', 'blue', 'yellow'] }] }, options: {} });

Checklist avant utilisation

• Inclure la bibliothèque Chart.js
• Créer un élément canvas pour chaque graphique
• Définir les données et les options
• Tester dans plusieurs navigateurs
• Adapter les couleurs et les libellés
• Commenter le code pour la maintenance

Questions fréquentes

Comment personnaliser les couleurs des graphiques ?

Modifiez les propriétés backgroundColor et borderColor dans les datasets.

Puis-je utiliser Chart.js sans connexion internet ?

Oui, téléchargez le fichier chart.js et incluez-le localement dans votre projet.

Comment ajouter des animations ?

Utilisez l'option animation dans la configuration du graphique, par exemple animation: { duration: 1000 }.