Кольцевая диаграмма Chart.js

Кольцевая диаграмма, также называемая диаграммой-пончиком, по сути представляет собой круговую диаграмму с вырезанной средней частью.

Кольцевая диаграмма — это график, образованный наложением двух или более круговых диаграмм разных размеров с удалённой средней частью.

  • Круговая диаграмма — это график, использующий круг и углы секторов внутри круга для представления величины значений. Она в основном используется для отображения доли данных каждого компонента в целом в выборке (или генеральной совокупности) и очень полезна для изучения структурных задач.

  • Кольцевая диаграмма похожа на круговую, но есть различия. У кольцевой диаграммы в середине есть "отверстие". Каждая выборка представлена кольцом, а каждая часть данных в выборке — сегментом кольца. Поэтому кольцевая диаграмма может отображать соответствующие пропорции частей в нескольких выборках, что облегчает сравнительное исследование состава.

Кольцевая диаграммаtypeСвойство —doughnut, а type описывает тип диаграммы.

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

Далее давайте создадим простую кольцевую диаграмму:

Пример

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Красный',
    'Синий',
    'Жёлтый'
  ],
  datasets: [{
    label: 'Пример кольцевой диаграммы',
    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, // Сделать диаграмму адаптивной, изменяющейся в соответствии с изменениями окна браузера
    maintainAspectRatio: false,// Сохранять исходное соотношение сторон диаграммы
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
                }
          }]
    }
  }
};
const myChart = new Chart(ctx, config);

Попробуйте сами »

Вывод приведенного выше примера:

Другие расширения