레슨 2 / 8·15분
원형 차트
Pie 차트와 Doughnut 차트
원형 차트는 전체 대비 각 항목의 비율을 직관적으로 보여주는 차트입니다. Chart.js에서 Pie와 Doughnut의 차이는 가운데 구멍의 유무뿐이며, 동일한 데이터 구조를 사용합니다.
javascript
const pieChart = new Chart(ctx, {
type: 'pie', // 'doughnut'으로 바꾸면 도넛 차트
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Go'],
datasets: [{
label: '프로그래밍 언어 선호도',
data: [35, 25, 20, 12, 8],
backgroundColor: [
'#f7df1e', // JavaScript - 노란색
'#3776ab', // Python - 파란색
'#ed8b00', // Java - 주황색
'#00599c', // C++ - 진파란색
'#00add8', // Go - 하늘색
],
hoverOffset: 10, // 호버 시 조각 돌출 거리
}],
},
});Doughnut 차트와 cutout 옵션
Doughnut 차트는 Pie 차트의 가운데에 구멍이 뚫린 형태입니다. cutout 옵션으로 구멍의 크기를 퍼센트 단위로 조절할 수 있습니다.
javascript
const doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['완료', '진행 중', '대기'],
datasets: [{
data: [60, 25, 15],
backgroundColor: [
'rgba(34, 197, 94, 0.8)',
'rgba(59, 130, 246, 0.8)',
'rgba(156, 163, 175, 0.8)',
],
borderWidth: 2,
borderColor: '#ffffff',
}],
},
options: {
cutout: '60%', // 가운데 구멍 크기 (기본 50%)
plugins: {
legend: {
position: 'bottom',
},
},
},
});- •cutout: "50%" — 기본 도넛 차트
- •cutout: "75%" — 얇은 링 형태의 도넛
- •cutout: "0%" — Pie 차트와 동일한 효과
- •hoverOffset — 호버 시 조각이 바깥으로 돌출되는 거리(px)
💡
색상 배열의 길이가 데이터 개수보다 적으면 Chart.js가 자동으로 색상을 반복 사용합니다. 가독성을 위해 항목마다 고유 색상을 지정하는 것이 좋습니다.