[javascript] Chartkick에서 사용 가능한 축 라벨 형식 설정 방법
Chartkick은 JavaScript를 사용하여 멋진 차트를 만들 수 있는 라이브러리입니다. 축 라벨 형식을 설정하는 방법을 알아보겠습니다.
x축 라벨 형식 설정하기
x축은 주로 시간, 날짜 또는 범주형 데이터를 표시하는 데 사용됩니다. x축 라벨 형식을 설정하려면 xLabelFormat 옵션을 사용하면 됩니다.
<%= line_chart data, xLabelFormat: function(date) { return date.toISOString().slice(0, 10); } %>
위의 예제에서는 xLabelFormat 함수를 사용하여 날짜를 ISO 형식으로 표시하고, 해당 일자의 첫 10자리만 출력합니다. 이를 통해 x축 라벨의 형식을 변환할 수 있습니다.
y축 라벨 형식 설정하기
y축은 주로 숫자 데이터를 표시하는 데 사용됩니다. y축 라벨 형식을 설정하려면 yLabelFormat 옵션을 사용하면 됩니다.
<%= line_chart data, yLabelFormat: function(value) { return value.toFixed(2) + " $"; } %>
위의 예제에서는 yLabelFormat 함수를 사용하여 숫자를 소수점 둘째 자리까지 표시하고, 숫자 뒤에 “$” 기호를 추가합니다. 이를 통해 y축 라벨의 형식을 변경할 수 있습니다.
축 라벨 형식 설정의 다른 옵션들
Chartkick에서는 축 라벨 형식 설정을 위해 다른 옵션들도 제공합니다. 몇 가지 예를 들어보겠습니다.
xLabelRotation: x축 라벨의 회전 각도를 설정합니다.xLabelWidth: x축 라벨의 너비를 설정합니다.yLabelPosition: y축 라벨의 위치를 설정합니다.yLabelAlign: y축 라벨의 정렬을 설정합니다.
모든 옵션들을 조합하여 원하는 축 라벨 형식을 설정할 수 있습니다.
참고 자료
지금까지 Chartkick에서 사용 가능한 축 라벨 형식 설정 방법을 알아보았습니다. 위의 예제 코드와 참고 자료를 활용하여 원하는 형식의 축 라벨을 설정해보세요.