데이터 시각화는 정보를 이해하기 쉽고 효과적으로 전달하는 핵심 도구입니다.
이를 위해 많은 라이브러리와 도구가 개발되었는데, (Chart.js, D3.js, Highcharts, Google Charts, Plotly ...)
그 중에서도 Chart.js는 사용하기 쉽고 다양한 종류의 차트를 만들 수 있는 하나의 도구입니다.
이번 포스트에서는 Chart.js를 소개하고, 간단한 예제를 통해 시작해보겠습니다.
Chart.js란?
홈페이지나 다른 chart.js의 설명이 잘 되어있는 글들이 있지만 다시 정리하면
Chart.js는 HTML5 Canvas를 사용하여 동적인 차트를 생성하는 JavaScript 라이브러리입니다. 간단한 사용법과 다양한 차트 종류를 제공하여, 데이터 시각화를 위한 이상적인 선택지입니다.
시작하기
Chart.js를 사용하여 간단한 선 그래프를 만들어보겠습니다. 먼저 HTML 파일을 생성하고, Chart.js 라이브러리를 연결합니다.
여러분이 프로젝트에 처음 접근하는 경우, Chart.js를 쉽게 활용할 수 있는 방법 중 하나는 CDN을 통해 라이브러리를 가져오는 것입니다. 이렇게 하면 로컬 환경에서 라이브러리를 설치하거나 관리할 필요가 없으며, 간편하게 시작할 수 있습니다.
간단한 예제를 통해 시작해보겠습니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Chart.js 소개</title>
<!-- chart.js 를 cdn을 통해 가져온다 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- 크기는 400 x 400 -->
<!-- div를 생성해 chart의 크기가 400x400을 넘어가지 않도록 해줘요 -->
<div style="width: 400px; height: 400px;">
<!-- chart가 그려질 canvas를 생성 -->
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script>
// 차트 생성
const canvas = document.getElementById('myChart'); // canvas를 ID로 가져오기
console.log(canvas);
const ctx = canvas.getContext('2d'); // canvas 요소의 2차원 그래픽 컨텍스트를 가져오는 메서드
// 캔버스에 선 그래프를 그리기 위해 Chart 객체를 생성합니다.
const myChart = new Chart(ctx, {
// 차트 유형 설정: 선 그래프
type: 'line',
// 데이터 설정
data: {
// x 축 레이블
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
// 데이터셋 설정
datasets: [{
// 데이터셋 제목
label: '# of Votes',
// 데이터 포인트 배열
data: [12, 19, 3, 5, 2, 3],
// 데이터 색상
// 데이터 색상
backgroundColor: 'rgba(255, 99, 132, 0.2)',
// 선 색상
borderColor: 'rgba(255, 99, 132, 1)',
// 선 두께
borderWidth: 1
}]
},
// 차트 옵션 설정
options: {
// y 축 시작 값 0으로 설정
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
위 코드는 'myChart'라는 ID를 가진 캔버스에 선 그래프를 그리는 간단한 예제입니다
간단한 chart.js 를 그려보면서 소개를 했습니다.
다음번에는 제가 실무에서 고생하면서 알게 된 여러 가지 내용들을 공유하면서 이만 물러가겠습니다.
'개발 > chart.js' 카테고리의 다른 글
| Chart.js에서 Min/Max를 활용한 Zoom In/Out 기능 구현하기 (0) | 2024.02.25 |
|---|---|
| Chart.js로 다양한 데이터를 동적으로 제어하기 (0) | 2024.02.18 |
