Diagramme en anneau Chart.js

Un diagramme en anneau, aussi appelé diagramme en beignet, est essentiellement un diagramme circulaire dont la zone centrale est évidée.

Un diagramme en anneau est un graphique formé en empilant deux ou plusieurs diagrammes circulaires de tailles différentes et en supprimant la partie centrale.

  • Un diagramme circulaire est un graphique qui utilise un cercle et les angles des secteurs à l'intérieur du cercle pour représenter l'ampleur des valeurs. Il est principalement utilisé pour montrer la proportion des données de chaque composant par rapport à l'ensemble dans un échantillon (ou une population), et est très utile pour étudier les problèmes structurels.

  • Un diagramme en anneau est similaire à un diagramme circulaire, mais il y a des différences. Un diagramme en anneau a un « trou » au milieu. Chaque échantillon est représenté par un anneau, et chaque partie des données de l'échantillon est représentée par un segment de l'anneau. Par conséquent, un diagramme en anneau peut afficher les proportions correspondantes des parties dans plusieurs échantillons, ce qui facilite la recherche comparative sur la composition.

Diagramme en anneautypeLa propriété estdoughnut, et type décrit le type de graphique.

const config = {
  type: 'doughnut',
  data: data,
};

Ensuite, créons un diagramme en anneau simple :

Exemple

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Rouge',
    'Bleu',
    'Jaune'
  ],
  datasets: [{
    label: 'Exemple de diagramme en anneau',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};
const config = {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true, // Configurer le graphique comme réactif, en s'adaptant aux changements de la fenêtre d'écran
    maintainAspectRatio: false,// Conserver le rapport d'aspect d'origine du graphique
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
                }
          }]
    }
  }
};
const myChart = new Chart(ctx, config);

Essayez-le vous-même »

La sortie de l'exemple ci-dessus est :

Autres extensions