Highcharts는 JavaScript 기반의 인터랙티브한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 만들 수 있으며, 축 범위를 설정하여 차트의 데이터 표현을 더욱 정확하게 조정할 수 있습니다.
X 축 범위 설정하기
X 축은 일반적으로 날짜, 시간 또는 카테고리 데이터를 표시하는데 사용됩니다. Highcharts에서는 xAxis
객체의 min
및 max
속성을 사용하여 X 축 범위를 설정할 수 있습니다. 아래는 예시 코드입니다.
Highcharts.chart('container', {
xAxis: {
min: new Date(2021, 0, 1),
max: new Date(2021, 11, 31)
},
// 다른 차트 옵션들...
});
위 코드에서는 min
속성에는 시작 날짜를, max
속성에는 종료 날짜를 지정하였습니다. 일일히 날짜를 지정하는 대신, 별도의 날짜 객체를 생성하여 min
및 max
속성에 할당할 수도 있습니다.
Y 축 범위 설정하기
Y 축은 주로 수치 데이터를 표시하는데 사용됩니다. Y 축의 범위를 설정하면 데이터의 분포를 더 정확하게 표현할 수 있습니다. Highcharts에서는 yAxis
객체의 min
및 max
속성을 사용하여 Y 축 범위를 설정할 수 있습니다. 아래는 예시 코드입니다.
Highcharts.chart('container', {
yAxis: {
min: 0,
max: 100
},
// 다른 차트 옵션들...
});
위 코드에서는 min
속성에는 최소값을, max
속성에는 최대값을 지정하였습니다. 여기서는 0부터 100까지의 범위를 설정하였지만, 원하는 범위로 수정할 수 있습니다.
축 범위 자동 설정
만약 축 범위를 직접 설정하지 않으면 Highcharts는 데이터를 기반으로 최적의 축 범위를 자동으로 설정합니다. 이 경우에는 min
및 max
속성을 지정하지 않으면 됩니다.
결론
Highcharts에서 축 범위를 설정하는 방법에 대해 알아보았습니다. 이를 통해 차트의 데이터 표현을 더욱 정확하게 조정할 수 있습니다. 따라서 필요에 따라 적절한 축 범위를 설정하여 차트의 가독성을 높일 수 있습니다.