Круговая диаграмма (pie) в Chart.js предназначена для визуального отображения долевого распределения данных, где каждая секция представляет отдельную категорию, а её размер пропорционален значению относительно общей суммы. Такой тип графика особенно эффективен в случаях, когда необходимо показать структуру целого и сравнить доли между собой без необходимости точного числового анализа.
В основе построения круговой диаграммы лежит один набор данных, в котором каждое значение преобразуется в сектор круга. Сумма всех значений автоматически нормализуется до 360 градусов. Это делает диаграмму интуитивно понятной: чем больше значение, тем больше угол сектора.
Создание круговой диаграммы в Chart.js начинается с определения объекта конфигурации, содержащего тип графика, данные и параметры отображения.
const config = {
type: 'pie',
data: {
labels: ['Красный', 'Синий', 'Жёлтый'],
datasets: [{
label: 'Распределение',
data: [300, 150, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
borderColor: [
'rgb(255, 255, 255)'
],
borderWidth: 2
}]
}
};В этом примере ключевыми элементами являются:
labels — массив подписей, определяющих категории данных. datasets — набор данных, содержащий значения и визуальные параметры отображения.
Каждое значение из data соответствует одной метке из
labels по индексу.
После определения конфигурации создаётся экземпляр графика через объект Canvas:
const ctx = document.getElementById('myChart');
new Chart(ctx, config);Chart.js автоматически привязывает график к выбранному элементу
<canvas> и выполняет отрисовку на основе переданных
данных.
Каждый сектор круговой диаграммы может быть настроен через набор визуальных свойств:
Пример расширенной настройки:
datasets: [{
data: [120, 80, 200],
backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56'],
borderColor: '#ffffff',
borderWidth: 3,
hoverOffset: 10
}]Параметр hoverOffset особенно важен для повышения
интерактивности, так как визуально выделяет активный сектор.
Круговая диаграмма не требует предварительного преобразования данных в проценты. Chart.js выполняет расчёт автоматически. Однако для отображения процентов в подсказках или подписях используется кастомизация tooltip.
Пример настройки отображения процентов:
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
const dataset = context.dataset.data;
const total = dataset.reduce((a, b) => a + b, 0);
const value = dataset[context.dataIndex];
const percent = ((value / total) * 100).toFixed(2);
return `${context.label}: ${percent}%`;
}
}
}
}
}Здесь вычисляется сумма всех значений и определяется доля каждого элемента.
Легенда в круговой диаграмме отображает соответствие цветов и
категорий. Управление осуществляется через
plugins.legend.
options: {
plugins: {
legend: {
display: true,
position: 'right',
labels: {
font: {
size: 14
},
padding: 20
}
}
}
}Возможные позиции легенды:
Легенда может быть отключена полностью при установке
display: false.
Chart.js поддерживает взаимодействие с элементами диаграммы. Наведение и клик по секторам позволяют извлекать данные.
Пример обработки клика:
const chart = new Chart(ctx, config);
ctx.oncl ick = function(evt) {
const points = chart.getElementsAtEventForMode(
evt,
'nearest',
{ intersect: true },
true
);
if (points.length) {
const firstPoint = points[0];
const label = chart.data.labels[firstPoint.index];
const value = chart.data.datasets[0].data[firstPoint.index];
console.log(label, value);
}
};Механизм взаимодействия строится на определении ближайшего элемента относительно координат курсора.
По умолчанию круговая диаграмма является адаптивной. Она
подстраивается под размеры контейнера <canvas>.
Управление этим поведением осуществляется через:
options: {
responsive: true,
maintainAspectRatio: false
}При отключении maintainAspectRatio график заполняет
доступное пространство, игнорируя исходное соотношение сторон.
Часто данные для круговой диаграммы поступают из API. В таком случае структура конфигурации формируется динамически:
fetch('/api/data')
.then(response => response.json())
.then(data => {
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
data: data.values,
backgroundColor: data.colors
}]
}
});
});Динамическая генерация позволяет использовать диаграмму в аналитических панелях и системах мониторинга.
Chart.js поддерживает обновление данных без пересоздания графика:
chart.data.datasets[0].data = [200, 100, 50];
chart.update();Метод update() пересчитывает и перерисовывает диаграмму
с новыми значениями.
Круговая диаграмма имеет близкий аналог — doughnut. Основное различие заключается в наличии центрального отверстия.
type: 'doughnut'Обе диаграммы используют одинаковую модель данных, но отличаются визуальным представлением. Doughnut часто применяется при необходимости размещения дополнительной информации в центре графика.
Подбор цветовой палитры напрямую влияет на читаемость диаграммы. Используются как статические цвета, так и генерация оттенков.
Пример равномерного распределения оттенков:
backgroundColor: [
'#4e79a7',
'#f28e2b',
'#e15759',
'#76b7b2',
'#59a14f'
]При большом количестве категорий важно избегать схожих оттенков, чтобы сохранить различимость секторов.
При увеличении количества категорий визуальная читаемость снижается. Секторы становятся слишком узкими, а подписи — перегруженными. В таких случаях используется группировка данных или переход к столбчатым диаграммам.
Дополнительное ограничение связано с невозможностью эффективного сравнения близких по значению категорий, так как визуальная разница углов воспринимается менее точно, чем линейные величины.
Tooltip остаётся основным способом представления точных значений. Помимо процентов, часто добавляются единицы измерения:
callbacks: {
label: function(context) {
return `${context.label}: ${context.raw} шт.`;
}
}Комбинирование абсолютных и относительных значений повышает информативность визуализации.
Chart.js позволяет задавать глобальные параметры, влияющие на все диаграммы:
Chart.defaults.font.family = 'Arial';
Chart.defaults.font.size = 12;
Chart.defaults.color = '#333';Эти настройки упрощают унификацию визуального стиля в проекте.
Круговая диаграмма применяется в интерфейсах аналитики, отчётных панелях, системах мониторинга и визуализации распределений. Она особенно эффективна при ограниченном числе категорий и необходимости быстрого восприятия структуры данных без глубокого анализа числовых значений.