[javascript] Chartkick을 사용한 선 그래프 생성

29 Nov 2023

javascript

JavaScript의 Chartkick 라이브러리는 강력하고 사용하기 쉬운 그래프 생성을 제공합니다. 이 라이브러리를 사용하여 선 그래프를 생성하는 방법을 알아보겠습니다.

Chartkick 설치

먼저, Chartkick을 설치해야 합니다. 다음 명령을 사용하여 Chartkick을 설치하세요.

npm install chartkick chart.js

HTML 파일에 스크립트 추가하기

선 그래프를 생성할 HTML 파일에 다음 스크립트 태그를 추가하세요.

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

선 그래프 생성하기

선 그래프를 생성하려면 chartkick 객체의 LineChart 메서드를 사용해야 합니다. 다음은 기본적인 선 그래프를 생성하는 예제입니다.

const data = [
  { name: 'January', data: { '2020': 5, '2021': 10, '2022': 15 } },
  { name: 'February', data: { '2020': 8, '2021': 12, '2022': 18 } },
  { name: 'March', data: { '2020': 10, '2021': 14, '2022': 20 } }
];

new chartkick.LineChart("chart", data);

위 예제에서 data 배열은 각 월과 해당 연도의 데이터를 포함합니다. new chartkick.LineChart("chart", data)를 호출하여 chart라는 ID를 가진 HTML 요소에 선 그래프를 생성합니다.

이렇게 하면 기본적인 선 그래프가 생성되며, 직접 커스텀하고 추가 기능을 적용할 수도 있습니다.

추가 기능

Chartkick은 선 그래프에 다양한 추가 기능을 제공합니다. 몇 가지 유용한 예제를 살펴보시죠.

축 레이블과 제목 추가하기

X축과 Y축의 레이블을 추가하려면 데이터 객체의 name 속성과 y 속성을 사용하세요.

const data = [
  { name: 'January', data: { '2020': 5, '2021': 10, '2022': 15 } },
  { name: 'February', data: { '2020': 8, '2021': 12, '2022': 18 } },
  { name: 'March', data: { '2020': 10, '2021': 14, '2022': 20 } }
];

new chartkick.LineChart("chart", data, {
  xtitle: 'Month',
  ytitle: 'Value',
  title: 'Monthly Data'
});

범례 추가하기

그래프에 범례를 추가하려면 데이터 객체의 name 속성을 사용하세요.

const data = [
  { name: 'January', data: { '2020': 5, '2021': 10, '2022': 15 } },
  { name: 'February', data: { '2020': 8, '2021': 12, '2022': 18 } },
  { name: 'March', data: { '2020': 10, '2021': 14, '2022': 20 } }
];

new chartkick.LineChart("chart", data, {
  legend: true
});