[javascript] Chartkick을 사용한 누적 막대 그래프 생성

29 Nov 2023

javascript

Chartkick은 HTML5의 canvas를 이용한 직관적인 그래프를 생성하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 다양한 종류의 그래프를 생성할 수 있습니다.

이번 예제에서는 Chartkick을 사용하여 누적 막대 그래프를 생성하는 방법을 알아보겠습니다.

1. Chartkick 설치하기

먼저 Chartkick을 사용하기 위해 ChartJS와 Chartkick 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 설치합니다.

npm install chart.js chartkick

2. HTML 페이지에 스크립트 추가하기

다음으로 HTML 페이지에 Chartkick 관련 스크립트를 추가합니다. 아래의 코드를 <head> 태그 안에 추가합니다.

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

3. 데이터 준비하기

누적 막대 그래프를 생성하기 위해서는 데이터를 준비해야 합니다. 예제를 위해 아래와 같은 데이터를 사용하겠습니다.

var data = [
  ["2021-01-01", 5],
  ["2021-02-01", 10],
  ["2021-03-01", 15],
  ["2021-04-01", 20]
];

위의 데이터는 날짜와 해당 날짜의 값을 나타내는 배열로 이루어져 있습니다.

4. 누적 막대 그래프 생성하기

이제 Chartkick을 사용하여 누적 막대 그래프를 생성할 수 있습니다. 아래의 코드를 <body> 태그 안에 추가합니다.

<div id="chart"></div>

<script>
  new Chartkick.LineChart("chart", data, { 
    library: { 
      scales: { yAxes: [{ stacked: true }] } 
    } 
  });
</script>

위의 코드에서는 new Chartkick.LineChart를 사용하여 누적 막대 그래프를 생성합니다. 첫 번째 인자로는 그래프를 생성할 요소의 ID를 전달하고, 두 번째 인자로는 데이터를 전달합니다. 마지막으로 library 옵션을 사용하여 그래프의 스타일을 지정할 수 있습니다. 위의 코드에서는 y축에 대해 누적 옵션을 설정하였습니다.

참고 자료

Chartkick 공식 사이트: https://chartkick.com/
Chartkick GitHub 저장소: https://github.com/chartjs/Chart.js