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

29 Nov 2023

javascript

차트의 축 단위 형식을 설정하는 것은 데이터를 더 직관적으로 이해할 수 있도록 도와줍니다. Chartkick에서는 축 단위 형식을 설정하기 위해 library 옵션을 사용합니다.

다음은 인기 있는 차트 유형인 선형 차트(Line Chart)에서 축 단위 형식을 설정하는 예시 코드입니다:

markdown

<html>
  <head>
    <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>
  </head>
  <body>
    <div id="chart"></div>

    <script>
      // 데이터 생성
      var data = {
        "2022-01-01": 5,
        "2022-01-02": 12,
        "2022-01-03": 8,
        "2022-01-04": 15,
        "2022-01-05": 10
      };

      // 차트 생성
      var chart = new Chartkick.LineChart('chart', data, {
        library: {
          scales: {
            y: {
              ticks: {
                callback: function (value, index, values) {
                  return value + "$"; // 단위 형식 설정
                }
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

위 코드에서 callback 함수를 사용하여 y 축 각 눈금마다 단위 형식을 추가했습니다. 위 코드에서는 간단한 달러 기호($)를 단위로 사용하도록 설정했습니다. 필요한 경우에는 더 복잡한 형식으로 변경할 수도 있습니다.

이렇게하면 차트에 y 축 단위 형식이 표시되어 각각의 데이터 포인트가 어떤 값을 나타내는지 쉽게 이해할 수 있습니다.

더 자세한 설정 방법 및 다른 차트 유형에 대한 정보는 Chartkick 공식 문서를 참조하십시오.