[javascript] Chartkick에서 사용 가능한 차트 축 범위 시작값 설정 방법

29 Nov 2023

javascript

Chartkick은 JavaScript로 작성된 오픈 소스 라이브러리로, 다양한 종류의 차트를 쉽게 생성할 수 있습니다. 이 라이브러리를 사용하여 차트를 생성할 때, 축의 범위 시작값을 설정하는 방법에 대해 알아보겠습니다.

1. Chartkick 설정하기

Chartkick을 사용하기 위해 먼저 해당 라이브러리를 불러와야 합니다. HTML 파일의 <head> 태그 안에 아래와 같이 스크립트를 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/chartkick"></script>

2. 차트 생성하기

Chartkick을 사용하여 차트를 생성할 수 있는 간단한 예제를 살펴보겠습니다. 아래 코드는 막대 차트를 생성하는 예제입니다.

<div id="chart" style="height: 300px;"></div>

<script>
  var data = [
    ["2022-01-01", 10],
    ["2022-01-02", 15],
    ["2022-01-03", 20]
  ];
  
  new Chartkick.ColumnChart("chart", data);
</script>

위 코드에서 data 변수에는 차트에 표시될 데이터가 포맷에 맞게 저장되어 있습니다. 예제에서는 날짜와 해당 날짜에 대한 값으로 이루어진 2차원 배열을 사용하였습니다.

3. 축 범위 시작값 설정하기

Chartkick에서는 축의 범위 시작값을 직접 설정할 수 있습니다. 아래와 같이 options 객체를 사용하여 축 범위의 시작값을 설정해 보겠습니다.

<script>
  var options = {
    min: 0 // 축 범위 시작값을 0으로 설정
  };
  
  new Chartkick.ColumnChart("chart", data, options);
</script>

위 코드에서 options 객체의 min 속성에 0을 할당하여 축의 범위 시작값을 0으로 설정하였습니다. 이렇게 설정하면 차트의 축 범위가 0부터 시작하게 됩니다.

마치며

Chartkick을 사용하여 생성한 차트의 축 범위 시작값을 설정하는 방법에 대해 알아보았습니다. 이를 통해 원하는 방식으로 차트를 커스터마이징할 수 있습니다.

더 자세한 정보는 Chartkick 공식 문서를 참고해 주세요.