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

29 Nov 2023

Chartkick은 JavaScript로 작성된 오픈 소스 라이브러리이며, 다양한 종류의 그래프와 차트를 생성할 수 있습니다. 이 라이브러리를 사용하면 간단한 코드로 인터랙티브한 데이터 시각화를 구현할 수 있습니다.

이번 포스트에서는 Chartkick에서 사용 가능한 축 타입을 설정하는 방법에 대해 알아보겠습니다.

X축과 Y축 타입 설정하기

Chartkick에서는 X축과 Y축에 대해 다양한 타입을 설정할 수 있습니다. 예를 들어, 날짜를 X축으로 사용하고 싶다면 “datetime” 타입을 설정할 수 있습니다. Y축은 “number” 타입을 기본값으로 사용합니다.

아래 예제 코드는 날짜와 시간을 X축으로 사용하고, Y축은 로그 스케일로 변경하는 방법을 보여줍니다.

<%= line_chart data, xtitle: "날짜", ytitle: "값", library: { scales: { x: { type: 'time' }, y: { type: 'logarithmic' } } } %>

각 그래프의 종류마다 사용 가능한 축 타입은 공식 문서에서 확인할 수 있습니다.

축 타입을 설정할 때, 추가로 옵션을 설정할 수도 있습니다. 예를 들어 Y축의 범위를 지정하거나 소숫점 자리수를 제한하는 등의 설정이 가능합니다. 아래 예제 코드는 Y축의 범위를 0에서 100으로 지정하고, 소숫점 자리수를 2자리까지 표시하는 방법을 보여줍니다.

<%= line_chart data, xtitle: "날짜", ytitle: "값", library: { scales: { y: { min: 0, max: 100 }, yAxes: [{ ticks: { precision: 2 } }] } } %>

축 타입 관련 옵션에 대한 상세한 내용은 공식 문서를 참고하시기 바랍니다.

Chartkick은 다양한 축 타입 설정을 제공하여 데이터 시각화를 더욱 다양하게 표현할 수 있도록 도와줍니다. X축과 Y축의 타입을 설정하고, 추가적인 옵션을 활용하여 원하는 형태의 그래프를 생성하세요.

더 많은 사용 가능한 옵션과 설정에 대해 자세히 알고 싶다면 Chartkick의 공식 문서를 참고하시기 바랍니다.