[javascript] Chartist로 간단한 라인 차트 그리기

01 Dec 2023

javascript

이번 글에서는 Chartist.js를 사용하여 간단한 라인 차트를 그리는 방법에 대해 알아보겠습니다.

Chartist.js는 가벼운 JavaScript 라이브러리로, 다양한 종류의 차트를 그릴 수 있습니다. 라인 차트를 그리기 위해서는 몇 가지 단계를 따라야 합니다.

설치 방법

Chartist.js라이브러리를 사용하기 위해서는 다음 명령어를 사용하여 설치해야 합니다.

npm install chartist

HTML 마크업

라인 차트를 그리기 위해 적절한 HTML 마크업을 준비해야 합니다. 예를 들어, 다음과 같은 구조를 가진 마크업을 만들 수 있습니다.

<div class="ct-chart ct-golden-section" id="chart"></div>

CSS 스타일링

이미 프로젝트에 Chartist.js 스타일 시트를 포함하고 있다면 별도의 스타일링 작업이 필요하지 않습니다. 그렇지 않은 경우, 아래와 같이 스타일 시트를 추가해야 합니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">

JavaScript 설정

라인 차트를 그리기 위해 JavaScript 설정을 추가해야 합니다. 다음과 같이 설정을 할 수 있습니다.

var data = {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 2, 4, 3, 1]
  ]
};

var options = {
  lineSmooth: Chartist.Interpolation.cardinal({
    tension: 0
  }),
  fullWidth: true,
  chartPadding: {
    right: 20
  }
};

var chart = new Chartist.Line('#chart', data, options);

위 예제에서는 월요일부터 금요일까지의 데이터를 나타내고 있습니다.

결과 확인

위 설정을 적용하면 준비한 데이터에 기반하여 라인 차트가 그려집니다. index.html 파일을 브라우저에서 열어 결과를 확인해보세요.

참고 자료

이제 Chartist.js를 사용하여 간단한 라인 차트를 그리는 방법에 대해 알아보았습니다. 더 많은 차트 유형과 설정 옵션을 사용하여 더 복잡하고 다양한 차트를 그릴 수 있습니다.