Chartist.js는 간단하고 가볍게 사용할 수 있는 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하여 그래프를 생성하고 축 레이블과 제목을 추가하는 방법에 대해서 알아보겠습니다.

Chartist 설치 및 설정

Chartist를 사용하기 위해서는 먼저 Chartist를 설치해야합니다. npm을 사용한다면 다음 명령어를 사용하여 Chartist를 설치할 수 있습니다.

npm install chartist --save

import Chartist from 'chartist';
import 'chartist/dist/chartist.css';

설치가 완료되었다면 Chartist를 import하고 CSS 파일을 import합니다.

축 레이블 및 제목 추가하기

Chartist에는 axisX와 axisY 객체를 사용하여 X축과 Y축의 레이블 및 제목을 추가할 수 있습니다.

new Chartist.Line('.ct-chart', {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 2, 4, 7, 3],
    [3, 1, 5, 2, 6]
  ]
}, {
  axisX: {
    labelInterpolationFnc: function(value, index) {
      return '일주일 중 ' + value;
    }
  },
  axisY: {
    labelInterpolationFnc: function(value, index) {
      return value + ' 걸음';
    }
  }
});

위의 예제에서는 X축에는 “일주일 중 월, 화, 수, 목, 금”을, Y축에는 “걸음”을 추가하였습니다. axisX와 axisY의 labelInterpolationFnc 속성을 사용하여 레이블과 값 사이의 변환 함수를 정의할 수 있습니다.

제목 추가하기

축 제목 또는 그래프 전체 제목을 추가하려면 axisX와 axisY 객체의 label 속성을 사용합니다.

new Chartist.Line('.ct-chart', {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 2, 4, 7, 3],
    [3, 1, 5, 2, 6]
  ]
}, {
  axisX: {
    label: '요일'
  },
  axisY: {
    label: '걸음'
  }
});

위의 예제에서는 X축 제목으로 “요일”을, Y축 제목으로 “걸음”을 추가하였습니다.

결론

Chartist.js를 사용하여 그래프에 축 레이블과 제목을 추가하는 방법에 대해서 알아보았습니다. axisX와 axisY 객체를 사용하여 원하는 레이블과 제목을 설정할 수 있습니다. Chartist.js는 간편하게 사용할 수 있는 라이브러리이며 다양한 그래프 설정 옵션을 제공하므로 참고하여 사용해보시기 바랍니다.

참고 자료

• Chartist.js 공식 문서