[javascript] Chartkick을 사용한 수평 막대 그래프 생성
수평 막대 그래프는 데이터를 가로축과 세로축으로 표시하여 비교하기 쉽게 표현하는 그래프입니다. 이번에는 Chartkick 라이브러리를 사용하여 수평 막대 그래프를 생성하는 방법에 대해 알아보겠습니다.
Chartkick?
Chartkick은 JavaScript로 작성된 그래프 생성 라이브러리입니다. 다양한 유형의 그래프를 쉽고 간편하게 생성할 수 있습니다. 이를 사용하면 별도의 그래프 생성 코드를 작성하지 않고도 웹 애플리케이션에 그래프를 추가할 수 있습니다.
수평 막대 그래프 생성하기
먼저, Chartkick 라이브러리를 웹 페이지에 추가하고 싶은 위치에 다음과 같이 코드를 추가해야 합니다.
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.chartkick.com/assets/Chart.js"></script>
이제 수평 막대 그래프를 생성하기 위해 해당 데이터를 정의해야 합니다. 예를 들어, 다음과 같은 데이터를 가지고 있는 경우를 가정해봅시다.
var data = [
["2016", 4],
["2017", 7],
["2018", 6],
["2019", 9],
["2020", 5]
];
이제 위의 데이터를 사용하여 수평 막대 그래프를 생성할 수 있습니다. 다음은 Chartkick을 사용하여 수평 막대 그래프를 그리는 코드입니다.
<%= javascript_include_tag "//www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag "//www.chartkick.com/assets/Chart.js" %>
<%= line_chart data %>
위의 코드를 사용하면 수평 막대 그래프가 웹 페이지에 표시됩니다. 만약, Rails 애플리케이션에서 사용한다면, .erb 파일에 위의 코드를 추가하면 됩니다.