Кольцевая диаграмма (doughnut)

Кольцевая диаграмма (doughnut) в Chart.js представляет собой разновидность круговой диаграммы, в которой центр остается пустым, а данные отображаются в виде сегментов кольца. Такая форма визуализации особенно удобна для отображения долей целого, когда требуется более компактное и современное представление по сравнению с классической pie-диаграммой.

Основой работы с кольцевой диаграммой является тип графика doughnut. Он задается при создании экземпляра Chart.js через параметр type.

Кольцевая диаграмма использует стандартную структуру data, которая включает:

  • labels — подписи сегментов
  • datasets — массив наборов данных

Каждый dataset содержит:

  • data — числовые значения
  • backgroundColor — цвета сегментов
  • borderColor — цвет границ
  • borderWidth — толщина границы

Пример базовой конфигурации:

const config = {
  type: 'doughnut',
  data: {
    labels: ['Красный', 'Синий', 'Жёлтый'],
    datasets: [{
      data: [30, 50, 20],
      backgroundColor: [
        '#ff6384',
        '#36a2eb',
        '#ffcd56'
      ],
      borderColor: '#ffffff',
      borderWidth: 2
    }]
  }
};

Создание диаграммы

Инициализация выполняется через объект Chart, которому передается контекст canvas и конфигурация:

const ctx = document.getElementById('myChart');

new Chart(ctx, config);

Chart.js автоматически рассчитывает углы сегментов на основе переданных значений и строит кольцевую структуру.

Параметр cutout и управление толщиной кольца

Ключевая особенность doughnut-диаграммы — наличие центрального отверстия. Его размер регулируется параметром cutout.

options: {
  cutout: '50%'
}

Значения могут задаваться:

  • в процентах ('50%')
  • в пикселях ('80')

Чем больше значение cutout, тем тоньше кольцо.

Пример тонкого кольца:

options: {
  cutout: '80%'
}

Пример почти сплошного круга:

options: {
  cutout: '10%'
}

Настройка внешнего вида сегментов

Каждый сегмент можно индивидуально стилизовать через массив свойств.

Цвета и границы

datasets: [{
  data: [40, 25, 35],
  backgroundColor: ['#4bc0c0', '#ff9f40', '#9966ff'],
  hoverBackgroundColor: ['#5ad3d3', '#ffb066', '#b085ff'],
  borderColor: '#ffffff',
  borderWidth: 3
}]

Hover-эффекты позволяют визуально выделять активный сегмент при наведении.

Отображение нескольких наборов данных

В отличие от pie-диаграммы, кольцевая диаграмма поддерживает несколько datasets, что позволяет строить вложенные кольца.

data: {
  labels: ['A', 'B', 'C'],
  datasets: [
    {
      data: [30, 40, 30],
      backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56']
    },
    {
      data: [20, 30, 50],
      backgroundColor: ['#ff9f40', '#4bc0c0', '#9966ff']
    }
  ]
}

Первый dataset отображается ближе к центру, последующие — внешними кольцами.

Работа с легендой

Легенда управляется через options.plugins.legend.

options: {
  plugins: {
    legend: {
      display: true,
      position: 'right'
    }
  }
}

Доступные позиции:

  • top
  • bottom
  • left
  • right

Дополнительно можно управлять стилем меток:

legend: {
  labels: {
    boxWidth: 12,
    padding: 20,
    color: '#333'
  }
}

Tooltip и отображение значений

Tooltip является важным элементом взаимодействия, так как показывает точные значения сегмента.

options: {
  plugins: {
    tooltip: {
      enabled: true
    }
  }
}

Можно кастомизировать отображаемый текст:

tooltip: {
  callbacks: {
    label: function(context) {
      const value = context.raw;
      return `Значение: ${value}`;
    }
  }
}

Центр диаграммы и кастомные элементы

Пустая центральная область позволяет размещать текст или дополнительные элементы через плагины.

Пример кастомного текста в центре:

const centerTextPlugin = {
  id: 'centerText',
  beforeDraw(chart) {
    const { width, height, ctx } = chart;
    ctx.save();

    ctx.font = 'bold 20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    ctx.fillText('Итого', width / 2, height / 2);

    ctx.restore();
  }
};

Chart.register(centerTextPlugin);

Анимация

Chart.js по умолчанию применяет анимацию появления. Управление осуществляется через animation:

options: {
  animation: {
    animateRotate: true,
    animateScale: false,
    duration: 1000
  }
}
  • animateRotate — вращение при загрузке
  • animateScale — масштабирование
  • duration — длительность анимации

Адаптивность

Диаграмма автоматически подстраивается под размеры контейнера:

options: {
  responsive: true,
  maintainAspectRatio: false
}

При отключении maintainAspectRatio можно свободно управлять высотой контейнера через CSS.

Взаимодействие с данными

Изменение данных в реальном времени требует обновления диаграммы через метод update().

chart.data.datasets[0].data = [10, 20, 70];
chart.update();

Добавление нового значения:

chart.data.labels.push('Новый');
chart.data.datasets[0].data.push(15);
chart.update();

Обработка пустых и нулевых значений

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

data: [0, 0, 100]

Такие случаи часто используются для индикации состояния или прогресса.

Практика композиции визуализации

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

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

Управление интерактивностью

Отклик на события позволяет расширять функциональность:

options: {
  onClick: (event, elements) => {
    if (elements.length > 0) {
      const index = elements[0].index;
      console.log(index);
    }
  }
}

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

Оглавление