Utilisation de Chart.js

Pour créer un graphique avec Chart.js, vous devez initialiser la classe Chart et passer le nœud du graphique :

Code Canvas HTML, l'emplacement d'affichage du graphique :

<canvas id="myChart" width="400" height="400"></canvas>

Obtenir le nœud par différentes méthodes :

Méthode d'initialisation

// Toutes les méthodes suivantes fonctionnent
const ctx = document.getElementById('myChart');  // Obtenir le nœud
const ctx = document.getElementById('myChart').getContext('2d');  // La méthode getContext() renvoie le contexte du canvas
const ctx = $('#myChart'); // récupération jQuery
const ctx = 'myChart'; // Transmettre l'ID du nœud

Après avoir obtenu le nœud d'élément avec le code ci-dessus, nous pouvons créer nos propres types de graphiques.

Dans l'exemple suivant, nous créons un simple graphique en courbes :

Exemple

const ctx = document.getElementById('myChart');
const labels = ['Janvier', 'Février', 'Mars','avril', 'mai', 'juin', 'juillet'];  // Définir les étiquettes correspondantes sur l'axe X
const data = {
  labels: labels,
  datasets: [{
    label: 'Mon premier graphique en courbes',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // Définir la couleur de la ligne
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Définir le type de graphique
  data: data,
};
const myChart = new Chart(ctx, config);

Essayez-le vous-même »

La sortie de l'exemple ci-dessus est :

L'exemple suivant crée un graphique à barres montrant les votes dans différentes couleurs.

Exemple

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Rouge', 'Bleu', 'Jaune', 'Vert', 'Violet', 'Orange'],
        datasets: [{
            label: '# Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Essayez-le vous-même »

La sortie de l'exemple ci-dessus est :

Structure de l'objet de configuration

La structure commune de l'objet de configuration est la suivante :

const config = {
  type: 'line'
  data: {}
  options: {}
  plugins: []
}

Description des paramètres :

  • type-- Spécifier le type de graphique
  • data-- L'ensemble de données affiché dans le graphique
  • options-- Quelques configurations optionnelles ; différents types de graphiques ont des configurations différentes
  • plugins-- Plugins
Autres extensions