Chartist는 JavaScript로 작성된 간단하고 유연한 차트 라이브러리입니다. 이 라이브러리를 사용하면 깔끔하고 시각적으로 인상적인 차트를 만들 수 있습니다. 이번 블로그 포스트에서는 Chartist에서 표시되는 데이터 값의 형식을 지정하는 방법에 대해 알아보겠습니다.

기본 설정

Chartist에서 데이터 값의 형식을 변경하려면 Chartist.plugins 객체의 ctAxisTitle 플러그인을 사용해야 합니다. 이 플러그인은 차트의 축 제목을 지정하는 기능뿐만 아니라 데이터 값 또한 형식화할 수 있습니다.

var chart = new Chartist.Line('.ct-chart', {
  series: [
    [10, 20, 15, 30, 40],
    [5, 15, 25, 35, 45]
  ]
}, {
  plugins: [
    Chartist.plugins.ctAxisTitle({
      axisX: {
        labelInterpolationFnc: function(value) {
          return '$' + value; // 데이터 값을 달러 형식으로 표시
        }
      },
      axisY: {
        labelInterpolationFnc: function(value) {
          return value + '%'; // 데이터 값을 퍼센트 형식으로 표시
        }
      }
    })
  ]
});

위의 코드에서는 axisX와 axisY 객체의 labelInterpolationFnc 속성을 사용하여 데이터 값을 형식화하고 있습니다. labelInterpolationFnc는 레이블을 표시할 때 호출되는 함수입니다. 이 함수에서 데이터 값을 원하는 형식으로 반환하면 됩니다.

위 예제에서는 X축의 값에는 달러 기호를 추가하고, Y축의 값에는 퍼센트 기호를 추가하여 데이터 값을 형식화하였습니다.

추가적인 형식화 옵션

데이터 값을 형식화할 때 가능한 옵션은 다양합니다. 아래는 몇 가지 예시입니다.

• 숫자 형식화: 데이터 값을 소수점 이하 자릿수로 반올림하거나 세 자리마다 쉼표로 구분하여 표시할 수 있습니다.
• 날짜 형식화: 데이터 값을 날짜 형식으로 변환하여 표시할 수 있습니다.
• 금액 형식화: 데이터 값을 통화 형식으로 변환하여 표시할 수 있습니다.

예를 들어, 데이터 값을 소수점 이하 두 자리까지 표시하려면 아래와 같이 코드를 수정할 수 있습니다.

axisX: {
  labelInterpolationFnc: function(value) {
    return '$' + value.toFixed(2); // 데이터 값을 소수점 이하 두 자리까지 표시
  }
}

이외에도 여러 가지 형식화 옵션을 사용하여 데이터 값을 원하는 형식으로 표시할 수 있습니다.

결론

Chartist에서 표시되는 데이터 값을 형식화하는 방법을 알아보았습니다. ctAxisTitle 플러그인을 사용하여 차트의 축 제목과 데이터 값을 각각 원하는 형식으로 지정할 수 있습니다. 이를 활용하여 보다 직관적이고 가독성 있는 차트를 만들 수 있습니다.