[javascript] Chartkick을 이용한 데이터 시각화

29 Nov 2023

javascript

데이터 시각화는 데이터를 시각적으로 표현하는 것을 의미합니다. 데이터 시각화를 통해 복잡한 데이터를 보다 직관적으로 이해할 수 있으며, 중요한 인사이트를 발견하고 의사 결정을 내릴 수 있습니다. 이번 블로그 포스트에서는 Chartkick라는 JavaScript 라이브러리를 사용하여 데이터 시각화를 어떻게 할 수 있는지 알아보겠습니다.

Chartkick이란?

Chartkick은 웹 페이지에서 간단하게 그래프를 그릴 수 있는 JavaScript 라이브러리입니다. 이를 사용하면 별도의 JavaScript 코드 없이도 그래프를 그릴 수 있습니다. Chartkick은 다양한 종류의 차트(예: 선 그래프, 막대 그래프, 도넛 그래프 등)를 지원하며, Google Charts, Chart.js 등의 다양한 그래프 라이브러리를 내부적으로 활용합니다.

Chartkick 사용하기

Chartkick을 사용하기 위해서는 먼저 Chartkick 라이브러리를 웹 페이지에 포함해야 합니다. Chartkick은 CDN을 통해 제공되므로, 아래의 코드를 <head> 태그 안에 추가하여 라이브러리를 가져옵니다.

<script src="https://cdn.jsdelivr.net/npm/chartkick@3.4.1"></script>

Chartkick을 사용하여 간단한 그래프를 그리기 위해서는 데이터를 준비해야 합니다. 아래는 차트에 사용할 데이터를 예시로 나타낸 것입니다.

var chartData = [
  ["2017-01-01", 100],
  ["2017-01-02", 150],
  ["2017-01-03", 200],
  ["2017-01-04", 120],
  ["2017-01-05", 180],
];

위 예시 데이터는 날짜와 해당 날짜에 발생한 이벤트 수를 나타냅니다. 이제 Chartkick을 사용하여 그래프를 그려보겠습니다.

<%= line_chart(chartData, {library: {title: 'Daily Events'}}) %>

위 코드는 line_chart 함수를 사용하여 선 그래프를 그리는 예시입니다. chartData는 위에서 준비한 데이터를 의미하며, title 속성을 사용하여 그래프에 제목을 추가할 수 있습니다.

Chartkick 그래프 커스터마이징

Chartkick을 사용하면 그래프를 커스터마이징할 수 있는 다양한 옵션을 제공합니다. 예를 들어, 그래프의 색상을 변경하거나, 축의 레이블을 수정하는 등의 작업을 할 수 있습니다. Chartkick의 자세한 사용 방법과 옵션에 대해서는 공식 문서를 참고하시기 바랍니다.

결론

이번 글에서는 Chartkick을 사용하여 데이터 시각화를 어떻게 할 수 있는지 알아보았습니다. Chartkick은 간단하고 사용하기 쉬운 JavaScript 라이브러리로, 다양한 종류의 그래프를 지원합니다. 데이터 시각화에 관심이 있는 개발자라면 Chartkick을 사용하여 복잡한 데이터를 직관적으로 표현해보세요!