[javascript] Chartkick에서 사용 가능한 축 단위 설정 방법

Chartkick은 JavaScript를 사용하여 데이터 시각화를 쉽게 만들 수 있는 라이브러리입니다. Chartkick은 다양한 유형의 차트를 지원하며, 축의 단위를 설정하는 방법을 제공합니다. 이 글에서는 Chartkick에서 축 단위를 설정하는 방법에 대해 알아보겠습니다.

1. X축 단위 설정

X축은 주로 시간, 날짜, 날짜 및 시간 등의 값으로 설정되는 경우가 많습니다. 따라서 X축에 사용할 단위를 설정해야 합니다. 아래는 X축의 단위를 설정하는 예제입니다.

<%= line_chart data, xtitle: 'Month', ytitle: 'Sales', x: {format: "%b %Y"} %>

위 예제에서 xtitle은 X축의 제목을 설정하며, ytitle은 Y축의 제목을 설정합니다. x는 X축의 값을 포맷하는 옵션입니다. 위 예제에서는 “%b %Y” 포맷으로 설정되어 있으며, 이는 월과 년을 나타내는 포맷입니다.

Chartkick에서는 Moment.js를 기본적으로 사용하기 때문에 Moment.js의 포맷을 따라야 합니다. Moment.js의 포맷에 대한 자세한 내용은 Moment.js 포맷 가이드를 참고하시기 바랍니다.

2. Y축 단위 설정

Y축은 주로 수치 데이터를 표현하는 경우 사용됩니다. 따라서 Y축에 사용할 단위를 설정해야 합니다. 아래는 Y축의 단위를 설정하는 예제입니다.

<%= line_chart data, xtitle: 'Month', ytitle: 'Sales', y: {suffix: ' $'} %>

위 예제에서 suffix는 Y축의 값에 추가로 표시할 문자열을 설정합니다. 위 예제에서는 달러 기호를 추가로 표시하고자 suffix: ' $'를 설정하였습니다. 단위가 없는 경우, suffix를 사용하지 않아도 됩니다.

3. Y축 범위 설정

Y축의 범위를 설정하고자 할 때도 있습니다. 아래는 Y축의 범위를 설정하는 예제입니다.

<%= line_chart data, xtitle: 'Month', ytitle: 'Sales', y: {min: 0, max: 100} %>

위 예제에서 min은 Y축의 최소값을 나타내며, max는 Y축의 최대값을 나타냅니다. 위 예제에서는 Y축의 범위를 0부터 100까지로 설정하였습니다.

Chartkick에서는 다양한 옵션을 제공하므로, 사용자의 요구에 맞게 축 단위를 설정할 수 있습니다. Chartkick의 공식 문서를 확인하면 더 많은 옵션과 예제를 찾을 수 있습니다. Chartkick 공식 문서를 참고하세요.