[javascript] Chartkick에서 사용 가능한 축 범위 설정 방법

29 Nov 2023

javascript

Chartkick은 JavaScript 라이브러리로, 다양한 종류의 그래프를 생성할 수 있게 해줍니다. 그래프의 축 범위를 설정하는 것은 시각화를 더욱 자세하게 제어하는 방법입니다. 이번 포스트에서는 Chartkick에서 사용 가능한 축 범위 설정 방법에 대해서 알아보겠습니다.

1. X축 범위 설정하기

X축은 그래프의 가로 축을 의미합니다. Chartkick에서 X축 범위를 설정하려면 min과 max속성을 사용합니다. 다음은 X축 범위를 설정하는 예시입니다.

new Chartkick.LineChart("chart-1", {
  data: [
    {name: "Data Set 1", data: {"2021-01-01": 10, "2021-02-01": 20, "2021-03-01": 30}},
    {name: "Data Set 2", data: {"2021-01-01": 15, "2021-02-01": 25, "2021-03-01": 35}}
  ],
  min: "2021-01-01",
  max: "2021-03-01"
});

위의 예시에서 min과 max속성은 날짜 형식인 문자열로 설정되어 있습니다. 이를 통해 X축의 범위를 “2021-01-01”에서 “2021-03-01”로 설정할 수 있습니다.

2. Y축 범위 설정하기

Y축은 그래프의 세로 축을 의미합니다. Chartkick에서 Y축 범위를 설정하려면 min과 max속성을 사용합니다. 다음은 Y축 범위를 설정하는 예시입니다.

new Chartkick.LineChart("chart-2", {
  data: [
    {name: "Data Set 1", data: {"2021-01-01": 10, "2021-02-01": 20, "2021-03-01": 30}},
    {name: "Data Set 2", data: {"2021-01-01": 15, "2021-02-01": 25, "2021-03-01": 35}}
  ],
  ymin: 0,
  ymax: 40
});

위의 예시에서 ymin과 ymax속성은 숫자로 설정되어 있습니다. 이를 통해 Y축의 범위를 0에서 40으로 설정할 수 있습니다.

3. 축 범위 설정 유의사항

축 범위를 설정할 때 몇 가지 유의사항이 있습니다.

날짜 형식에서는 ISO 8601 형식을 따라야 합니다.
min과 max는 문자열로 설정하거나, Date 객체로 설정할 수 있습니다.
ymin과 ymax의 값은 숫자로 설정해야 합니다.

참고 자료:

Chartkick 공식 문서: https://chartkick.com/

이상으로 Chartkick에서 사용 가능한 축 범위 설정 방법에 대해 알아보았습니다. 그래프의 축 범위를 설정하면 데이터를 더욱 명확하게 표현할 수 있습니다. Chartkick의 공식 문서를 참고하여 더 자세한 설정 방법을 확인해보세요.