[javascript] Chartkick에서 사용 가능한 차트 축 눈금 범위 설정 방법
Chartkick는 JavaScript 기반의 간편한 차트 라이브러리로, 데이터 시각화를 위한 다양한 차트를 생성할 수 있습니다. 이번 블로그 포스트에서는 Chartkick에서 사용 가능한 차트 축 눈금 범위를 설정하는 방법에 대해 알아보겠습니다.
1. Chartkick 차트 생성하기
먼저, Chartkick 라이브러리를 로드하고 차트를 생성해야 합니다. 예를 들어, 선 그래프(Line Chart)를 생성하는 방법은 다음과 같습니다:
<%= line_chart(data) %>
이렇게 하면 기본적으로 X축과 Y축의 눈금 범위가 자동으로 설정됩니다. 하지만 때로는 특정한 범위로 축의 눈금을 설정해야 할 필요가 있을 수 있습니다.
2. 축 눈금 범위 설정하기
Chartkick에서 축 눈금 범위를 설정하는 방법은 각각 X축과 Y축에 대해 다릅니다.
2.1. X축 눈금 범위 설정하기
X축의 눈금 범위를 설정하려면 min 및 max 속성을 사용합니다. 예를 들어, X축의 범위를 0부터 100으로 설정하려면 다음과 같이 코드를 작성할 수 있습니다:
<%= line_chart(data, min: 0, max: 100) %>
2.2. Y축 눈금 범위 설정하기
Y축의 눈금 범위를 설정하려면 library 옵션을 사용해야 합니다. 예를 들어, Y축의 범위를 0부터 10으로 설정하려면 다음과 같이 코드를 작성할 수 있습니다:
<%= area_chart(data, library: { scales: { yAxes: [{ ticks: { min: 0, max: 10 } }] } }) %>
3. 마무리
이렇게 Chartkick에서 사용 가능한 차트 축 눈금 범위를 설정하는 방법에 대해 알아보았습니다. 특정한 눈금 범위가 필요할 때는 위에서 소개한 방법을 사용하여 설정할 수 있습니다. Chartkick에 대한 더 자세한 내용은 공식 문서를 참조하시기 바랍니다.