Diagramme à barres Chart.js

Un diagramme à barres est un graphique statistique qui utilise la longueur des rectangles comme variable.

Les diagrammes à barres sont utilisés pour comparer deux valeurs ou plus (à différents moments ou dans différentes conditions), avec une seule variable, et sont généralement utilisés pour l'analyse de jeux de données plus petits.

La propriététypedu diagramme à barres estbar, type décrit le type de graphique.

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

Ensuite, nous créons un diagramme à barres simple :

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 diagramme à barres',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [      // Définir la couleur d'arrière-plan de chaque barre
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [     // Définir la couleur de la ligne de bordure de chaque barre
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1     // Définir la largeur de la ligne
  }]
};
const config = {
  type: 'bar', // Définir le type de diagramme
  data: data,  // Définir le jeu de données
  options: {
    scales: {
      y: {
        beginAtZero: true // Définir l'axe y pour qu'il commence à 0
      }
    }
  },
};
const myChart = new Chart(ctx, config);

Essayez-le »

Le résultat de sortie de l'exemple ci-dessus est :

Diagramme à barres horizontales

Le diagramme à barres horizontales est une variante du diagramme à barres verticales, souvent utilisé pour montrer les tendances des données et comparer plusieurs jeux de données côte à côte.

Pour configurer un diagramme à barres horizontales, vous devez définir la propriété indexAxis de l'objet options sury, la valeur par défaut de la propriété indexAxis estx。

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: [{
    axis: 'y',
    label: 'Mon premier diagramme à barres',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    backgroundColor: [      // Définir la couleur d'arrière-plan de chaque barre
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [     // Définir la couleur de la ligne de bordure de chaque barre
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1     // Définir la largeur de la ligne
  }]
};
const config = {
  type: 'bar', // Définir le type de diagramme
  data: data,  // Définir le jeu de données
  options: {
    indexAxis: 'y',
  }
};
const myChart = new Chart(ctx, config);

Essayez-le »

Le résultat de sortie de l'exemple ci-dessus est :

Autres extensions