[javascript] Chartkick을 사용한 범례 추가 방법

29 Nov 2023

javascript

Chartkick은 JavaScript로 작성된 간단하고 직관적인 차트 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에 차트를 추가하는 것은 매우 쉽습니다. 하지만 기본적으로 Chartkick은 차트에 범례를 자동으로 추가하지 않습니다. 이번 글에서는 Chartkick을 사용하여 차트에 범례를 추가하는 방법을 알아보겠습니다.

1. Chartkick 설치하기

Chartkick을 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. chartkick 패키지를 NPM을 통해 설치하거나, CDN을 사용하여 직접 웹 페이지에서 라이브러리를 로드할 수 있습니다. 여기에서는 CDN을 사용하는 방법을 소개하겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Chartkick Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chartkick"></script>
  </head>
  <body>
    <div id="chart-container"></div>

    <script>
      // 차트 생성 및 데이터 설정
      // ...
    </script>
  </body>
</html>

2. 범례 추가하기

Chartkick을 사용하여 차트에 범례를 추가하는 방법은 간단합니다. options 객체에 legend 속성을 설정하여 범례를 추가할 수 있습니다. legend 속성은 다음과 같은 구조로 설정됩니다.

{
  legend: "bottom", // 범례 위치 설정 (top, bottom, left, right)
  legendFormatter: (chart, legend) => { /* 범례 형식 변경 */ }
}

예를 들어, 아래 코드는 간단한 막대 그래프에 범례를 추가하는 예시입니다.

<script>
  var data = [
    ["January", 10],
    ["February", 20],
    ["March", 30]
  ];

  var options = {
    legend: "bottom"
  };

  new Chartkick.ColumnChart("chart-container", data, options);
</script>

위 코드에서 options 객체에 legend: "bottom"을 추가함으로써 범례를 그래프의 하단에 표시할 수 있습니다.

3. 범례 형식 변경하기

범례의 형식을 변경하려면 legendFormatter 속성을 사용할 수 있습니다. 이 속성에는 형식을 변경하는 콜백 함수를 제공해야 합니다.

{
  legendFormatter: (chart, legend) => {
    // 범례 형식 변경 로직 구현
    return formattedLegend;
  }
}

콜백 함수에는 chart와 legend 두 개의 매개변수가 전달됩니다. chart는 차트 인스턴스를 나타내며, legend는 현재 범례 항목을 나타냅니다. 이를 활용하여 필요한 형식으로 범례를 변경할 수 있습니다.

<script>
  var data = [
    ["January", 10],
    ["February", 20],
    ["March", 30]
  ];

  var options = {
    legend: "bottom",
    legendFormatter: (chart, legend) => {
      return legend.toUpperCase();
    }
  };

  new Chartkick.ColumnChart("chart-container", data, options);
</script>

위 코드는 범례 항목을 대문자로 변경하는 예시입니다. legendFormatter 속성에 콜백 함수를 추가하여 필요한 형식으로 범례를 변경할 수 있습니다.

결론

이제 Chartkick을 사용하여 차트에 범례를 추가하는 방법을 알아보았습니다. options 객체를 사용하여 범례의 위치와 형식을 원하는대로 설정할 수 있습니다. Chartkick을 사용하면 직관적이고 멋진 차트를 손쉽게 구현할 수 있습니다.

더 자세한 내용은 Chartkick 공식 문서를 참조하시기 바랍니다.