소개

Chart.js는 HTML 5 기반의 JavaScript 라이브러리로, 시각화를 위한 다양한 종류의 그래프를 생성할 수 있습니다. 이 라이브러리는 간편한 사용법과 다양한 옵션을 제공하여 데이터 시각화를 용이하게 만들어줍니다. 이번 블로그 포스트에서는 Chart.js를 사용하여 시계열 데이터를 시각화하는 방법에 대해 알아보겠습니다.

설치 및 설정

Chart.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 npm 패키지로 설치할 수 있습니다.

npm install chart.js

설치가 완료되면, HTML 파일에서 Chart.js를 import해야 합니다. 아래와 같이 script 태그를 사용하여 import할 수 있습니다.

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

데이터 준비

시계열 데이터를 시각화하기 위해서는 적절한 데이터 구조가 필요합니다. 대부분의 시계열 데이터는 일련의 시간과 해당 시간에 대한 값을 가지고 있습니다. 예를 들어, 주식 시장의 종가 데이터와 해당 날짜와 시간이 시계열 데이터입니다. 차트를 그리기 위해 데이터를 가공하여 다음과 같은 형태로 준비하면 됩니다.

const data = {
  labels: ['2021-01-01', '2021-01-02', '2021-01-03', ...],
  datasets: [
    {
      label: '종가',
      data: [100, 150, 120, ...],
    },
  ],
};

여기서 labels는 시간을 나타내는 배열이고, datasets는 차트에서 시각화할 데이터 배열입니다. label은 데이터의 이름을 나타내는 문자열이며, data는 실제 데이터 값을 나타내는 배열입니다.

차트 생성

데이터를 준비한 뒤에는 다음과 같이 Chart.js를 사용하여 시계열 데이터를 시각화할 수 있습니다.

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: data,
});

이 코드는 id가 chart인 canvas 요소에 라인 차트를 그리는 Chart.js 객체를 생성합니다.

차트 옵션

Chart.js는 다양한 옵션을 제공하여 차트의 스타일과 레이아웃을 변경할 수 있습니다. 예를 들어, 차트의 타이틀, 축 레이블, 색상, 글꼴 등을 설정할 수 있습니다. 차트 생성 코드에 옵션을 추가하여 다음과 같이 차트를 커스터마이징할 수 있습니다.

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    title: {
      display: true,
      text: '시계열 데이터',
    },
    scales: {
      x: {
        title: {
          display: true,
          text: '날짜',
        },
      },
      y: {
        title: {
          display: true,
          text: '가격',
        },
      },
    },
  },
});

위 예제에서 title 옵션은 차트의 제목을 설정하고, scales 옵션은 x축과 y축의 레이블을 설정합니다.

결론

Chart.js는 간편한 사용법과 다양한 옵션을 제공하여 시계열 데이터를 시각화하는 데 유용한 도구입니다. 데이터를 적절한 형태로 가공한 뒤에 Chart.js를 사용하여 차트를 생성하고 옵션을 설정하면 손쉽게 시계열 데이터를 시각화할 수 있습니다.

참고 자료

• Chart.js 공식 문서: https://www.chartjs.org/
• Chart.js GitHub 저장소: https://github.com/chartjs/Chart.js