[javascript] Chartkick에서 사용 가능한 차트 축 단위 접미사 설정 방법

29 Nov 2023

javascript

Chartkick에서는 축 단위 접미사를 설정하기 위해 library 옵션을 사용합니다. library 옵션에는 사용자 정의 함수를 전달하여 축 레이블을 변경할 수 있습니다. 그러므로 차트 축에 접미사를 추가하기 위해 library 옵션으로 함수를 전달하면 됩니다.

다음은 Chartkick을 사용하여 축 단위 접미사를 설정하는 예제입니다.

<canvas id="chart"></canvas>

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.chartkick.com/assets/Chart.bundle.js"></script>
<script src="https://www.chartkick.com/assets/Chart.js"></script>

<script>
// 차트 데이터 생성
var data = [
  ["January", 1000],
  ["February", 2000],
  ["March", 3000],
  ["April", 4000],
  ["May", 5000]
];

// 축 단위 접미사 설정 함수
function addUnit(value, unit) {
  return value + unit;
}

// 차트 생성 및 옵션 설정
var options = {
  library: {
    xAxis: {
      labelInterpolationFnc: function(value) {
        return addUnit(value, "K");
      }
    }
  }
};

// 차트 그리기
Chartkick.LineChart("chart", data, options);
</script>

위의 코드는 Line 차트를 생성하고 x축 레이블을 변경하여 접미사 “K”를 추가하는 예제입니다. addUnit 함수는 value와 unit를 입력으로 받아 값을 형식화한 다음 접미사를 추가하는 역할을 합니다. 이 함수는 labelInterpolationFnc를 통해 x축 레이블에 적용됩니다.

이제 차트를 그리고 원하는 축 단위 접미사가 추가되었음을 확인할 수 있습니다. 이와 같은 방식으로 Chartkick를 사용하여 다양한 축 단위 접미사를 설정할 수 있습니다.

Chartkick에 대한 자세한 내용은 공식 문서를 참조하십시오.