[Highcharts] Axes
Axes
x축과 y축은 cartesian coordinate system 데이터 값을 가지는 모든 차트에 기본적으로 표시된다. 아래는 축 요소에 대한 대략적인 개념도이다.
Axis labels, tickmarks and gridlines
축 레이블, 틱마크 그리고 그리드 라인은 밀접하게 연관되어 있고 함께 확장된다. 포지셔닝은 차트에서 데이터가 표시되는 가장 최적화된 핏으로 계산된다.
TICKS
틱마크는 축에 따라 그어진 선들이며 재량 단위를 보여준다. 틱 사이의 공간은 tickInterval과 tickPixelInterval 옵션에 의해 결정된다. 레이블과 그리드 선은 틱 마크와 같은 공간에 놓인다.
tickInterval 옵션은 축에서 틱간의 거리를 결정한다. 기본값은 null인데 이는 선형 그리고 시간 축의 tickPixelInterval 값에 근사하게 계산한다는 의미다.
카테고라이즈 축에선, null tickInterval의 기본값은 1로 설정된다.
시간 축에선 밀리세컨드로 설정됨을 주의하라. 따라서 하루의 인터벌은 24 3600 1000으로 표현된다.
로그(logarithmic) 축에선, tickInterval은 제곱으로 표시된다. 따라서 tickInterval 1은 0.1, 1, 10, 100 등마다 하나의 틱이 된다. tickInterval 2는 0.1, 10, 1000 등으로 tickInterval 0.2에서는 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 등이 된다.
tickPixelInterval 옵션은 픽셀 값에 기반해 틱 마크를 대략적인 픽셀 간격으로 설정한다(만약 tickInterval이 null이라면). 이는 차트 사이즈와 축 길이에 관계없이 적절한 틱간의 간격을 보장함으로써 반응형 레이아웃에서 유리하다. 카테고라이즈 축에서는 적용되지 않는다. 기본값은 y축 72, x축 100이다.
MINOR TICKS
만약 minorTickInterval 옵션이 설정되면, minor 틱은 major 틱 사이에 표시된다. 이는 레이블은 제외하고 다른 스타일을 가지는 minor 틱 마크, minor 그리드 선을 포한한다.
LABELS
축 레이블은 상응하는 데이터 값을 표시한다. 레이블은 형태 함수를 사용해 커스터마이징 할 수 있다.
yAxis: {
labels: {
formatter: function() {
return this.value + ' %';
}
},
},위 예제는 y축의 값을 받아 % 표시를 위에 붙여 나타내는 예시이다.
GRID LINES
그리드 선은 차트를 그리드로 나누어 차트를 읽기 쉽도록 해주는 수평선(혹은 수직선)의 모음이다.
x축 혹은 y축의 그리드 선을 표시하거나 없애기 위해선 각각의 축에 gridLineWidth를 설정하라.
xAxis: {
gridLineWidth: 1
},
yAxis: {
gridLineWidth: 1
}y축 그리드의 경우 기본값으로 표시가 되고(gridLineWidth: 1), x축의 경우 기본값으로 표시되지 않는다(gridLineWidth: 0).
그리드 선의 다른 옵션들은 API reference에서 확인할 수 있다.
minor 그리드 선은 minorTickInterval 옵션으로 표시할 수 있다.
Multiple axes
여러개의 축을 가지면서 다른 데이터 시리즈와 연동하는 것이 가능하다. 여러 개의 축을 생성해야 할 때는 아래와 같이 하면 된다.
yAxis: [{ //--- Primary yAxis
title: {
text: 'Temperature'
}
}, { //--- Secondary yAxis
title: {
text: 'Rainfall'
},
opposite: true
}],
series: [{
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
yAxis: 1,
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]리스트를 이용해 여러개의 축을 만들었다. 첫 번째 yAxis는 0인 덱스로 시작한다. 그리고 opposite: true 옵션은 축을 차드의 우측에 놓이도록 한다.
ALIGN TICKS
다수의 축을 사용할때, 다수의 그리드 선이 차트를 어지럽히는 것을 방지하기 위해 틱을 나열하는 것이 보통 바람직하다. chart.alignTicks 옵션은 기본값으로 true 값을 가진다. 나열의 단점은 각 축이 다른 축의 tick 크기와 같도록 설정된다는 것이다. 따라서 틱 크기가 최적화되지 않을 수 있다. 한 가지 대체방법은 alignTicks를 끄고 gridLineWidth를 0으로 설정하는 것이다.
ALIGN THRESHOLDS
버전 10 이후로, chart.alignThresholds 옵션으로 다수의 축 threshold를 나열하는 것이 가능해 졌다. 이것은 alignTicks와 비슷하나 한 단계 더 나아가 zero-level 혹은 다른 종류의 threshold가 나열될 수 있도록 한다.
Axis title
축 타이틀은 축 라인 옆에 나타난다. 이 타이틀은 기본 설정으로 y축에 나타나고 x축에는 숨김으로 설정된다. 더 많은 옵션은 xAxis.title을 참조하라.
Axis types
축은 linear, logarithmic, datetime, 혹은 categories 축으로 나뉜다. 축 타입은 아래와 같이 설정할 수 있다.
// The types are 'linear', 'logarithmic' and 'datetime'
yAxis: {
type: 'linear',
}
// Categories are set by using an array
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
}LINEAR
데이터값은 축을 따라 선형적으로 증가/감소한다. 기본 축 타입의 설정은 linear 타입이다. 만약 y 값만이 데이더 시리즈에 있다면 x축은 0에서 y값의 숫자만큼 표시된다.(yrkqtdml 인덱스 배열을 표시)
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
title: {
text: 'Fruit Number'
},
tickInterval: 1
},
yAxis: {
title: {
text: 'Fruit eaten'
},
tickInterval: 1
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}});LOGARITHMIC
logarithmic 축은 축을 따라 거듭제곱으로 수가 커진다 그리고 축은 차트의 시리즈 데이터에 따라 조절된다.
logarithmic 축에서 tickInterval 옵션은 거듭제곱 기준임을 명심하라. 즉 tickInterval이 1이면 각 tick이 0.1, 1, 10, 100 등이며 tickInterval이 2이면 0.1, 10, 1000 등이다. tickInterval이 0.2이면 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 등이다.
그리고 또 하나 주의할 점은 logarithmic 축은 각 축 유닛이 이전의 10배이기 때문에 절대 음수가 될 수 없다는 점이다. 결과적으로 Highcharts는 0이나 음수는 축에서 제외시킨다. 만약에 axis.min 옵션으로 0이나 음수를 설정하려고 한다면, 에러와 함께 실패할 것이다.
DATETIME
datetime 축은 적절한 간격으로 날짜 값의 레이블을 표시한다. 내부적으론 datetime 축은 자바스크립트의 Date 객체에 따라 1970년 1월 1일부터의 밀리 세컨즈 값에 기반한 linear 숫자 축이다. 크기에 따라 datetime 레이블은 시간 혹은 일자로 표시된다.
아래는 유용한 함수이다:
// Get time in millis for UTC
Date.UTC(year,month,day,hours,minutes,seconds,millisec)
// Get time in millis for your local time
Date.parse("Month day, year");
// Built in Highcharts date formatter based on the [PHP strftime](https://php.net/manual/en/function.strftime.php) (see [API reference](https://api.highcharts.com/class-reference/Highcharts.Time#dateFormat) for usage)
Highcharts.dateFormat("Month: %m Day: %d Year: %Y", 20, false);Unix 기반 서버 timestamps는 밀리세컨즈가 아닌 세컨즈로 표시되는 것을 주의하라. PHP 시간은 Unix timestamp를 사용하기 때문에 Highcharts를 사용할 때는 1000을 곱해주어야 한다.
Highcharts Stock x축은 항상 datetime 축이다.
CATEGORIES
categories에서는 숫자나 일자 대신에 축위에 카테고리의 이름이 표시된다. xAxis.categories를 참조하라.
출처: https://www.highcharts.com/docs/chart-concepts/axes
Axes | Highcharts
Axes
www.highcharts.com