Chartist는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 그러나 때로는 Chartist의 기본 축 단위가 원하는 것과 다를 수 있습니다. 이러한 경우에는 축 단위를 변경해야 할 수 있습니다. 이 기능을 사용하여 Chartist 차트의 축 단위를 쉽게 변경할 수 있습니다.

축 단위 변경 예제

차트의 축 단위를 변경하는 예제를 살펴보겠습니다. 아래 코드는 Chartist.js를 사용하여 간단한 막대 그래프를 그리는 예제입니다.

// chart 데이터
var data = {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 2, 4, 6, 3]
  ]
};

// chart 옵션
var options = {
  axisY: {
    labelInterpolationFnc: function(value) {
      return value + ' 회';
    }
  }
};

// chart 생성
new Chartist.Bar('#chart', data, options);

위의 코드는 막대 그래프를 생성하고 Y축의 레이블을 ‘회’ 단위로 변경하는 예제입니다. options 객체의 axisY 속성에 labelInterpolationFnc 콜백 함수를 정의하여 Y축의 레이블이 표시되는 방식을 변경합니다.

위의 예제에서는 value 변수에 현재 값이 전달되고, value 값을 ‘회’ 문자열과 연결하여 반환하는 방식으로 레이블을 변경하였습니다.

이제 위의 코드를 실행하면 Y축의 레이블이 ‘1 회’, ‘2 회’, ‘3 회’ 등으로 표시됩니다.

결론

이상으로 Chartist에서 차트의 축 단위를 변경하는 방법을 알아보았습니다. Chartist는 매우 유연한 라이브러리이므로 다양한 옵션을 사용하여 차트를 변경하고 수정할 수 있습니다. 결과적으로, 원하는 축 단위로 차트를 쉽게 조정할 수 있습니다.

참고 문서: Chartist.js 공식 문서