Chart.js-Donut-Diagramm

Ein Ringdiagramm, auch Donut-Diagramm genannt, ist im Wesentlichen ein Kreisdiagramm mit ausgehöhltem mittleren Bereich.

Ein Ringdiagramm ist ein Diagramm, das durch Stapeln von zwei oder mehr Kreisdiagrammen unterschiedlicher Größe und Entfernen des mittleren Teils entsteht.

  • Ein Kreisdiagramm ist ein Diagramm, das einen Kreis und die Winkel der Sektoren innerhalb des Kreises verwendet, um die Größe von Werten darzustellen. Es wird hauptsächlich verwendet, um den Anteil der Daten jeder Komponente am Ganzen in einer Stichprobe (oder Grundgesamtheit) zu zeigen, und ist sehr nützlich für die Untersuchung struktureller Probleme.

  • Ein Ringdiagramm ähnelt einem Kreisdiagramm, es gibt jedoch Unterschiede. Ein Ringdiagramm hat ein "Loch" in der Mitte. Jede Stichprobe wird durch einen Ring dargestellt, und jeder Teil der Daten in der Stichprobe wird durch ein Segment des Rings dargestellt. Daher kann ein Ringdiagramm die entsprechenden Anteile von Teilen in mehreren Stichproben anzeigen, was vergleichende Untersuchungen der Zusammensetzung erleichtert.

RingdiagrammtypeDie Eigenschaft istdoughnut, und type beschreibt den Diagrammtyp.

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

Als Nächstes erstellen wir ein einfaches Ringdiagramm:

Beispiel

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Rot',
    'Blau',
    'Gelb'
  ],
  datasets: [{
    label: 'Ringdiagramm-Beispiel',
    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, // Das Diagramm responsiv einstellen, sodass es sich bei Änderungen des Fensters anpasst
    maintainAspectRatio: false,// Das ursprüngliche Seitenverhältnis des Diagramms beibehalten
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
                }
          }]
    }
  }
};
const myChart = new Chart(ctx, config);

Selbst ausprobieren »

Die Ausgabe des obigen Beispiels ist:

Andere Erweiterungen