[javascript] Chartist에서 차트의 축 눈금 설정 변경하기

01 Dec 2023

Chartist는 간단하고 유연한 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 생성하고 사용자 정의할 수 있습니다. 이번에는 Chartist를 사용하여 차트의 축 눈금 설정을 변경하는 방법을 알아보겠습니다.

Chartist는 라인 차트, 막대 차트, 파이 차트 등 다양한 유형의 차트를 제공합니다. 각각의 차트 유형에는 X축과 Y축이 있으며, 이 축의 눈금을 조절하여 차트의 외관을 변경할 수 있습니다.

X축의 눈금을 변경하려면 axisX 객체를 사용해야 합니다. axisX 객체는 Chartist에서 X축의 설정을 담당합니다. 예를 들어, X축의 눈금 간격을 변경하려면 interval 속성을 사용할 수 있습니다.

new Chartist.Line('.chart', {
  // 차트 데이터
}, {
  axisX: {
    interval: 5 // X축 눈금 간격 설정
  },
  // 기타 차트 설정
});

위 예제에서 interval 값으로 5를 설정하였으므로 X축의 눈금은 5별 기준으로 표시됩니다.

Y축의 눈금을 변경하려면 axisY 객체를 사용해야 합니다. axisY 객체는 Chartist에서 Y축의 설정을 담당합니다. 예를 들어, Y축의 눈금 간격을 변경하려면 interval 속성을 사용할 수 있습니다.

new Chartist.Line('.chart', {
  // 차트 데이터
}, {
  axisY: {
    interval: 10 // Y축 눈금 간격 설정
  },
  // 기타 차트 설정
});

위 예제에서 interval 값으로 10을 설정하였으므로 Y축의 눈금은 10별 기준으로 표시됩니다.

눈금 외에도 축의 여러 속성을 사용하여 차트의 외관을 변경할 수 있습니다. axisX 및 axisY 객체에는 다음과 같은 속성이 있습니다.

이러한 속성을 조절하여 차트의 축 설정을 변경할 수 있습니다.