레슨 4 / 8·20분
고급 차트 (레이더, 극좌표, 버블)
레이더 차트 (Radar Chart)
레이더 차트(Spider Chart)는 여러 항목의 수치를 동시에 비교할 때 유용합니다. 팀원 역량 평가, 제품 스펙 비교, 성능 지표 대시보드 등에서 자주 사용됩니다. 각 축(axis)이 하나의 평가 항목을 나타내며, 데이터가 다각형 형태로 표시됩니다.
javascript
const radarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['JavaScript', 'TypeScript', 'React', 'Node.js', 'SQL', 'DevOps'],
datasets: [
{
label: '개발자 A',
data: [90, 80, 85, 70, 65, 50],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverRadius: 6,
},
{
label: '개발자 B',
data: [70, 90, 60, 85, 80, 75],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverRadius: 6,
},
],
},
options: {
scales: {
r: {
beginAtZero: true,
max: 100,
ticks: { stepSize: 20 },
pointLabels: { font: { size: 13 } },
},
},
plugins: {
legend: { position: 'top' },
},
},
});극좌표 차트 (Polar Area Chart)
극좌표 차트는 파이 차트와 비슷하지만, 각 섹터의 각도는 동일하고 반지름으로 값의 크기를 표현합니다. 값의 상대적 크기를 면적으로 비교하기에 효과적입니다.
javascript
const polarChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['마케팅', '개발', '디자인', 'QA', '운영'],
datasets: [{
data: [300, 500, 200, 150, 250],
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(255, 205, 86, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(54, 162, 235, 0.6)',
],
borderWidth: 1,
}],
},
options: {
scales: {
r: {
beginAtZero: true,
ticks: {
callback: function(value) {
return value + '만원';
},
},
},
},
},
});버블 차트 (Bubble Chart)
버블 차트는 산점도(Scatter)의 확장으로, x, y 좌표에 더해 세 번째 차원(r: 반지름)으로 크기를 표현합니다. 세 가지 변수를 동시에 시각화할 수 있습니다.
javascript
const bubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label: '제품 A',
data: [{ x: 20, y: 30, r: 15 }],
backgroundColor: 'rgba(255, 99, 132, 0.6)',
},
{
label: '제품 B',
data: [{ x: 40, y: 10, r: 25 }],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
},
{
label: '제품 C',
data: [{ x: 15, y: 50, r: 10 }],
backgroundColor: 'rgba(75, 192, 192, 0.6)',
},
{
label: '제품 D',
data: [{ x: 60, y: 25, r: 20 }],
backgroundColor: 'rgba(255, 205, 86, 0.6)',
},
],
},
options: {
scales: {
x: {
title: { display: true, text: '가격 (만원)' },
},
y: {
title: { display: true, text: '만족도 (점)' },
},
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
var point = context.raw;
return context.dataset.label +
': 가격 ' + point.x + '만원, 만족도 ' + point.y +
'점, 판매량 ' + point.r;
},
},
},
},
},
});복합 차트 (Mixed Chart)
하나의 캔버스에 여러 타입의 차트를 조합할 수 있습니다. datasets 배열의 각 항목에 type을 개별 지정하면 됩니다.
javascript
const mixedChart = new Chart(ctx, {
type: 'bar', // 기본 타입
data: {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
datasets: [
{
type: 'bar',
label: '매출 (만원)',
data: [120, 190, 150, 250, 220, 300],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
order: 2, // 막대가 뒤에 그려짐
},
{
type: 'line',
label: '목표 달성률 (%)',
data: [80, 95, 75, 110, 100, 120],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.1)',
fill: true,
yAxisID: 'y1', // 오른쪽 Y축 사용
order: 1, // 선이 앞에 그려짐
},
],
},
options: {
scales: {
y: {
position: 'left',
title: { display: true, text: '매출 (만원)' },
},
y1: {
position: 'right',
title: { display: true, text: '달성률 (%)' },
grid: { drawOnChartArea: false },
},
},
},
});💡
복합 차트에서 order 속성으로 그리기 순서를 제어할 수 있습니다. order 값이 작을수록 앞(위)에 그려집니다. 선 차트를 막대 차트 위에 표시하려면 선의 order를 더 작게 설정하세요.