Chartkick은 간단하고 직관적으로 사용할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 다양한 종류의 그래프를 쉽게 생성할 수 있습니다.
이번에는 Chartkick을 사용하여 파이 그래프를 생성하는 방법에 대해 알아보겠습니다.
1. Chartkick 설치 및 설정
먼저, Chartkick을 사용하기 위해 Chart.js 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 설치할 수 있습니다.
npm install chart.js chartkick
설치가 완료되면, HTML 파일의 <head> 태그 안에 아래 스크립트를 추가해야 합니다.
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="/path/to/chartkick.min.js"></script>
여기서 /path/to/chartkick.min.js는 설치한 Chartkick 라이브러리의 경로로 바꿔야 합니다.
2. 파이 그래프 생성하기
Chartkick을 사용하여 파이 그래프를 생성하려면, <div> 요소를 생성하고 해당 요소의 data 속성에 데이터를 설정해야 합니다.
<div id="chart" data-chart-data='{"Apple": 40, "Banana": 25, "Orange": 35}'></div>
위 코드에서 chart라는 id를 가진 <div> 요소를 생성하였고, data-chart-data 속성을 사용하여 그래프의 데이터를 설정하였습니다. 데이터는 JSON 형식으로 표현되며, 각 데이터는 라벨과 값을 가지고 있습니다.
마지막으로, JavaScript 코드를 추가하여 Chartkick을 초기화하고 생성한 파이 그래프를 렌더링합니다.
<script>
document.addEventListener("DOMContentLoaded", function() {
Chartkick.charts["chart"].createChart("PieChart");
});
</script>
위 코드는 DOMContentLoaded 이벤트가 발생하면 Chartkick 라이브러리를 초기화하고 파이 그래프를 생성하는 것을 의미합니다. chart는 이전에 생성한 <div> 요소의 id입니다.
결과 확인하기
위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 열면 파이 그래프가 표시될 것입니다. 각 항목의 라벨과 해당하는 값에 따라 파이 그래프가 생성되며, 원형 그래프의 섹션은 해당 항목의 값에 따라 크기가 조정됩니다.
Chartkick을 사용하면 복잡한 그래프를 쉽게 생성할 수 있습니다. 파이 그래프뿐만 아니라 선 그래프, 막대 그래프 등 다양한 종류의 그래프를 만들 수 있으므로, 필요에 따라 다양하게 활용해 보세요!