Chart.js는 오픈소스 자바스크립트 라이브러리로, 복잡한 설정 없이도 웹사이트에 애니메이션이 적용된 인터랙티브 그래프를 간편하게 추가할 수 있도록 도와줍니다.
Chart.js는 막대그래프(bar), 선그래프(line), 원형차트(pie), 도넛차트(doughnut), 방사형차트(radar) 등 다양한 차트 유형을 지원하며, HTML5의 <canvas> 요소를 기반으로 동작하기 때문에 모든 최신 브라우저에서 일관된 성능을 제공합니다. 또한 반응형(responsive) 디자인을 기본적으로 지원하여 화면 크기에 따라 차트가 자동으로 조정됩니다.
Chart.js 주요 특징
- 간단한 사용법: CDN 링크 한 줄만 추가하면 바로 사용할 수 있습니다.
- 다양한 차트 유형: 막대, 선, 파이, 도넛, 레이더 등 8가지 이상의 차트를 지원합니다.
- 애니메이션 효과: 차트가 로딩될 때 부드러운 전환 애니메이션이 자동으로 적용됩니다.
- 반응형 지원: 화면 크기에 맞춰 차트 크기가 자동으로 조절됩니다.
- 커스터마이징: 색상, 축 범위, 툴팁 등 세부 설정을 자유롭게 변경할 수 있습니다.
Chart.js 사용 예제 코드
아래는 Chart.js 라이브러리를 활용해 간단한 막대그래프(Bar Chart)를 만드는 전체 코드입니다. 이 예제는 연도별 가계 소득 데이터를 시각화합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<canvas id="myChart" width="500" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2005", "2007", "2009", "2012", "2014"],
datasets: [
{ label: 'HouseHold income',
data: [5000, 8000, 10000, 12000, 15000],
backgroundColor: [
'rgba(255, 129, 102, 1)',
'rgba(234, 162, 235, 1)',
'rgba(255, 206, 36, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
코드 설명
<canvas id="myChart">: 차트가 그려질 영역을 정의합니다. Chart.js는 캔버스 요소 위에 그래프를 렌더링합니다.type: 'bar': 생성할 차트의 유형을 지정합니다. 여기서는 막대그래프를 사용했습니다.labels: X축에 표시될 항목(연도)을 배열로 정의합니다.datasets: 실제 데이터 값과 각 막대의 배경색을 지정합니다.beginAtZero: true: Y축이 항상 0부터 시작하도록 설정하여 데이터 비교를 더 직관적으로 만듭니다.
실행 결과
위 코드를 브라우저에서 실행하면, 연도별 가계 소득을 나타내는 다색 막대그래프가 애니메이션과 함께 표시됩니다. 마우스를 막대 위에 올리면 해당 값에 대한 툴팁(tooltip)이 나타나며, 사용자와 상호작용할 수 있습니다.
마무리
Chart.js는 학습 곡선이 낮으면서도 강력한 시각화 기능을 제공하기 때문에, 대시보드 제작, 데이터 리포트, 관리자 페이지 등 다양한 프로젝트에서 널리 활용되고 있습니다. 공식 문서(chartjs.org)에서 더 많은 차트 유형과 고급 옵션을 확인할 수 있습니다.