document.addEventListener('DOMContentLoaded', function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [
'Проектные работы',
'Управление и контроль строительства',
'Фундамент',
'Стены',
'Крыша',
'Окна и наружные двери',
'Внутренние инженерные системы',
'Наружные инженерные системы',
'Отделочные работы',
'Отделочные материалы',
'Отделочные материалы',
'Сантехническое оборудование',
'Электротехническое оборудование',
'Освещение',
'Мебель',
'Бытовая техника',
'Декор',
'Благоустройство'
],
datasets: [{
label: 'Процентное распределение',
data: [2, 2, 10, 10, 14, 5, 6, 5, 11, 8, 7, 3, 1, 2, 12, 3, 1, 7],
backgroundColor: [
'rgba(255, 0, 0, 0.8)', // Красный для "Проектные работы"
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)', // Серый
'rgba(189, 185, 182, 0.8)' // Серый
],
borderColor: [
'rgba(255, 0, 0, 1)', // Красный для "Проектные работы"
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)', // Серый
'rgba(189, 185, 182, 1)' // Серый
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true
},
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex] + ' (' + value + '%)';
},
color: 'white',
font: {
weight: 'bold'
}
}
},
cutoutPercentage: 0, // Убираем вырез в центре диаграммы
rotation: -Math.PI / 2, // Поворачиваем диаграмму, чтобы "Проектные работы" были сверху
circumference: Math.PI * 2, // Полный круг
offset: 10 // Небольшой отступ для выделения "Проектные работы"
}
});
});