Chartkick은 JavaScript로 작성된 데이터 시각화 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 선 그래프, 막대 그래프, 원 그래프 등을 생성할 수 있습니다. 축 레이블은 그래프의 x 축과 y 축에 표시되는 값들을 의미합니다. 이번 포스트에서는 Chartkick에서 축 레이블을 설정하는 방법을 알아보겠습니다.
X 축 레이블 설정하기
선 그래프나 막대 그래프에서 x 축 레이블은 기본적으로 데이터 포인트의 값입니다. 예를 들어, 다음과 같은 코드로 그래프를 생성할 수 있습니다.
new Chartkick.LineChart("chart", {"2017-01-01": 5, "2017-01-02": 10, "2017-01-03": 15});
위 코드는 선 그래프를 생성하는 예시입니다. 이 때, x 축은 날짜를 표시하고 있습니다. 하지만, 만약 다른 값을 x 축으로 표시하고 싶다면 어떻게 할까요? 이 경우, 데이터 포인트의 객체 형태로 x 값과 y 값 모두 지정해주면 됩니다. 예를 들어,
new Chartkick.LineChart("chart", [{name: "Category 1", data: {"2017-01-01": 5, "2017-01-02": 10, "2017-01-03": 15}}, {name: "Category 2", data: {"2017-01-01": 8, "2017-01-02": 12, "2017-01-03": 20}}]);
위 코드에서는 name 속성으로 카테고리 이름을 지정하고, data 속성에 x 값과 y 값의 객체를 지정해주는 방식입니다.
Y 축 레이블 설정하기
Y 축 레이블은 그래프의 값의 범위를 나타냅니다. 기본적으로 Chartkick은 자동으로 Y 축의 범위를 결정합니다. 그러나, 경우에 따라서는 Y 축 범위를 수동으로 설정하고 싶을 때가 있습니다.
Y 축 범위를 설정하려면 옵션 객체에 min과 max 속성을 추가해주면 됩니다. 예를 들어,
new Chartkick.LineChart("chart", {"2017-01-01": 5, "2017-01-02": 10, "2017-01-03": 15}, {min: 0, max: 20});
위 코드에서는 Y 축의 범위를 0부터 20까지로 설정하고 있습니다.
정리
이번 포스트에서는 Chartkick에서 축 레이블을 설정하는 방법을 알아보았습니다. X 축 레이블은 데이터 포인트의 값이 기본이지만, 객체 형태로 지정하여 다른 값을 표시할 수도 있습니다. 또한, Y 축 레이블은 기본적으로 자동으로 설정되지만, 수동으로 범위를 설정할 수 있습니다. Chartkick의 다양한 설정들을 활용하여 보다 유연하고 직관적인 그래프를 생성해보세요.