[javascript] Chartkick에서 사용 가능한 축 포맷 설정 방법
Chartkick은 JavaScript 라이브러리로서, 다양한 종류의 차트를 생성할 수 있는 간단하고 강력한 도구입니다. 축 포맷을 설정함으로써 차트의 레이아웃과 표현을 커스터마이즈할 수 있습니다. 이번 블로그 포스트에서는 Chartkick에서 사용 가능한 축 포맷을 설정하는 방법에 대해 알아보겠습니다.
1. 축 포맷 설정
Chartkick에서는 축을 포맷하는 데 사용할 수 있는 다양한 옵션을 제공합니다. 아래 예제 코드를 통해 어떻게 축 포맷을 설정하는지 살펴보겠습니다.
new Chartkick.LineChart("chart", {
xtitle: "월",
ytitle: "판매량",
library: {
axis: {
x: {
labelInterpolationFnc: function(value, index) {
// x 축 포맷 설정
return index % 2 === 0 ? value : null;
}
},
y: {
labelInterpolationFnc: function(value) {
// y 축 포맷 설정
return value + "개";
}
}
}
},
data: [
{"name":"제품 A", "data":{"1": 10, "2": 20, "3": 15, "4": 25}},
{"name":"제품 B", "data":{"1": 20, "2": 30, "3": 25, "4": 35}}
]
});
2. 축 포맷 설정 예제 설명
위의 예제 코드에서는 labelInterpolationFnc 함수를 사용하여 x 축과 y 축의 포맷을 설정합니다. library.axis.x.labelInterpolationFnc 함수는 x 축의 라벨을 설정하고, library.axis.y.labelInterpolationFnc 함수는 y 축의 라벨을 설정합니다.
x 축 포맷 설정 함수에서는 index를 사용하여 짝수 인덱스에만 라벨을 표시하도록 설정하였습니다. 이를 통해 x 축의 라벨이 너무 밀집되는 것을 방지할 수 있습니다.
y 축 포맷 설정 함수에서는 라벨 값 뒤에 “개”를 추가하여 라벨을 표시하였습니다. 이를 통해 y 축의 데이터 값을 보다 직관적으로 이해할 수 있습니다.