Chart.js는 웹 애플리케이션에서 쉽게 사용할 수 있는 JavaScript 차트 라이브러리입니다. 이번 블로그 포스트에서는 Chart.js를 이용하여 기본 차트를 생성하는 방법에 대해 알아보겠습니다.

차트 라이브러리 설치

Chart.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 아래 명령어를 이용하여 npm을 통해 설치할 수 있습니다.

npm install chart.js

또는 CDN을 이용하여 스크립트를 HTML 파일에 추가할 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

HTML에 캔버스 요소 추가

차트를 그리기 위해 HTML 파일에 <canvas> 요소를 추가해야 합니다. 이 요소는 차트가 그려질 영역을 제공합니다. 아래와 같이 HTML 파일에 <canvas> 요소를 추가합니다.

<canvas id="myChart"></canvas>

캔버스 요소에는 ID를 지정할 수 있는데, 위의 예시에서는 myChart라는 ID를 사용하였습니다.

기본 차트 생성

Chart.js를 이용하여 기본 차트를 생성하려면 아래와 같은 단계를 따라야 합니다.

1. 캔버스 요소 선택
2. 데이터와 옵션 설정
3. 차트 생성

아래는 간단한 선형 차트를 생성하는 예제입니다:

// 캔버스 요소 선택
const canvas = document.getElementById('myChart');

// 데이터와 옵션 설정
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [{
    label: 'Sales',
    data: [120, 230, 180, 310, 220, 340],
    borderColor: 'rgba(75, 192, 192, 1)',
    fill: false
  }]
};

const options = {
  responsive: true,
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

// 차트 생성
new Chart(canvas, {
  type: 'line',
  data: data,
  options: options
});

위의 예제에서는 선형 차트를 생성하는데, x축 레이블은 월별로 지정되고, 데이터는 각 월별 판매량입니다. 차트의 색상은 rgba(75, 192, 192, 1)로 지정되었고, 라인 차트 형식으로 표시되도록 설정되었습니다. 그리고 y축은 0부터 시작하는 옵션이 설정되었습니다.

마무리

이번 포스트에서는 Chart.js를 이용하여 기본 차트를 생성하는 방법에 대해 알아보았습니다. Chart.js는 다양한 종류의 차트를 생성할 수 있는 다양한 옵션과 기능을 제공하므로 웹 애플리케이션에서 시각화를 구현하는 데 유용하게 사용할 수 있습니다.

더 자세한 정보는 Chart.js 공식 문서를 참고하세요.