Chartkick은 웹 어플리케이션에서 간단하게 그래프를 생성하기 위한 JavaScript 라이브러리입니다. 이번 글에서는 Chartkick을 사용하여 가로 막대 그래프를 생성하는 방법을 알아보겠습니다.
1. Chartkick 설치하기
Chartkick을 사용하기 위해서는 먼저 Chartkick을 설치해야 합니다. 다음의 npm 명령어를 사용하여 Chartkick을 설치합니다.
npm install chartkick
2. HTML 파일에 Chartkick 추가하기
Chartkick을 사용하기 위해 HTML 파일에 Chartkick을 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 Chartkick을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chartkick Example</title>
<script src="https://cdn.jsdelivr.net/npm/chartkick"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
3. JavaScript 파일에서 데이터 설정하기
가로 막대 그래프를 생성하기 위해 JavaScript 파일에서 데이터를 설정해야 합니다. 다음과 같이 데이터를 설정하고 Chartkick에 그래프를 그리는 코드를 추가합니다.
var data = [
["2015", 10],
["2016", 20],
["2017", 30],
["2018", 40],
["2019", 50]
];
var chart = document.getElementById("chart");
chartkick.BarChart(chart, data, { horizontal: true });
위의 예제에서는 연도와 값에 대한 데이터를 가지고 가로 막대 그래프를 생성하고 있습니다. chartkick.BarChart() 함수를 호출하여 그래프를 그리고, horizontal 옵션을 true로 설정하여 가로 방향으로 막대 그래프를 생성합니다.
4. 결과 확인하기
설치와 설정이 완료되었다면 웹 브라우저에서 HTML 파일을 열어서 결과를 확인할 수 있습니다. Chartkick을 사용하여 생성한 가로 막대 그래프가 출력되는 것을 확인할 수 있을 것입니다.
참고 자료
이제 Chartkick을 사용하여 가로 막대 그래프를 생성하는 방법을 알아보았습니다. Chartkick은 다양한 그래프 유형을 지원하므로 필요에 따라 다른 그래프도 쉽게 생성할 수 있습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.