[javascript] Chartkick을 사용한 멀티 영역 그래프 생성

29 Nov 2023

javascript

Chartkick은 JavaScript로 작성된 오픈 소스 라이브러리로, 다양한 종류의 그래프를 쉽게 생성할 수 있도록 도와줍니다. 이번 포스트에서는 Chartkick을 사용하여 멀티 영역 그래프를 생성하는 방법을 알아보겠습니다.

1. Chartkick 설치

Chartkick은 CDN을 통해 쉽게 설치할 수 있습니다. HTML 파일의 <head> 태그 안에 다음 코드를 추가해주세요.

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartkick"></script>

2. 멀티 영역 그래프 생성

Chartkick을 이용하여 멀티 영역 그래프를 생성하는 방법은 매우 간단합니다. 그래프를 표현할 요소를 선택하고, 그래프의 종류와 데이터를 설정해주기만 하면 됩니다.

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

var data = [
  {"name": "Series 1", "data": {"2020-01-01": 10, "2020-01-02": 7, "2020-01-03": 12}},
  {"name": "Series 2", "data": {"2020-01-01": 5, "2020-01-02": 9, "2020-01-03": 6}}
];

chartkick.areaChart("chart", data);

위의 예시에서는 “Series 1”과 “Series 2”라는 두 개의 시리즈를 가지고 있으며, 각 시리즈는 날짜별로 데이터를 갖고 있습니다. 그래프를 보여주기 위해 chartkick.areaChart() 함수를 호출하고, 데이터와 그래프를 표현할 요소의 ID를 전달해주면 됩니다.

3. 추가 설정

Chartkick을 사용하여 그래프를 생성하는 것 이외에도 다양한 설정을 추가할 수 있습니다. 예를 들어, 그래프의 제목, 축의 레이블, 칼라 스키마 등을 설정할 수 있습니다. Chartkick 문서에서 자세한 설정 방법을 확인할 수 있습니다.

4. 결론

Chartkick을 사용하면 쉽게 멀티 영역 그래프를 생성할 수 있습니다. 위의 예시를 참고하여 웹 애플리케이션에서 다양한 그래프를 활용해보세요. Chartkick 문서를 통해 더 많은 그래프 생성 방법과 설정 가능한 옵션을 확인할 수 있습니다.

Chartkick: https://www.chartkick.com/
Chartkick 문서: https://github.com/ankane/chartkick.js