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

29 Nov 2023

javascript

도넛 그래프는 데이터를 시각적으로 나타내기 위한 효과적인 방법 중 하나입니다. JavaScript 라이브러리인 Chartkick을 사용하면 간단하게 도넛 그래프를 생성할 수 있습니다. 이 글에서는 Chartkick을 사용하여 도넛 그래프를 생성하는 방법을 알아보겠습니다.

Chartkick이란?

Chartkick은 JavaScript와 Ruby에서 사용할 수 있는 데이터 시각화 라이브러리입니다. Chart.js라는 인기 있는 그래프 라이브러리를 기반으로하여 간편한 API를 제공합니다. Chartkick을 사용하면 몇 줄의 코드로 다양한 종류의 그래프를 생성할 수 있습니다.

도넛 그래프 생성하기

Chartkick을 사용하여 도넛 그래프를 생성하려면 다음 단계를 따르면 됩니다.

Chartkick 라이브러리를 프로젝트에 추가합니다. npm을 사용한다면 다음 명령을 실행해주세요.

npm install chartkick

HTML 파일에 Chartkick과 Chart.js를 포함시킵니다.

<script src="https://www.chartkick.com/9.1.1/chart.js"></script>
<script src="path/to/chartkick.js"></script>

도넛 그래프를 그릴 데이터를 생성합니다. 데이터는 key-value 쌍으로 구성된 배열로 전달됩니다. 여기서는 사용자별 판매량을 나타내는 데이터를 예로 들겠습니다.

const data = [
  { name: "User A", data: 100 },
  { name: "User B", data: 200 },
  { name: "User C", data: 300 },
];

생성된 데이터를 도넛 그래프로 표시합니다. Chartkick의 Donut 함수를 사용하면 됩니다.

const chart = new Chartkick.Donut("chart_div", data);

chart_div는 도넛 그래프가 그려질 HTML 요소의 ID입니다. 해당 ID를 가진 요소가 포함된 위치에 도넛 그래프가 표시됩니다.

도넛 그래프를 스타일링합니다. Chart.js의 기능을 사용하면 도넛 그래프를 원하는 대로 스타일링할 수 있습니다. 예를 들면, 도넛 그래프의 색상을 변경하려면 backgroundColor 속성을 사용할 수 있습니다.

chart.options.doughnut.backgroundColor = ["#FF6384", "#36A2EB", "#FFCE56"];

마무리

이렇게 Chartkick을 사용하여 도넛 그래프를 생성하는 방법을 알아봤습니다. Chartkick을 사용하면 간편하게 다양한 종류의 그래프를 생성할 수 있으므로 데이터 시각화에 유용한 도구로 활용할 수 있습니다. Chartkick의 공식 문서를 참고하여 더 많은 기능과 사용법을 익힐 수 있습니다.

Chartkick이란?

도넛 그래프 생성하기

마무리

참고 자료