Linear Axis
데이터포인트들이 균일한 간격으로 배치된다.
즉, 값 사이의 비율과 축 길이 비율이 어느 위치에서나 항상 동일하고,
또 값이 연속되기 때문에 데이터포인트들이 표시되지 않는 빈 구간들이 존재할 수 있다.
(데이터포인트와 lable의 개수를 정확히 맞추려면 'category' 축을 고려해야 한다)
명시적으로 축 type을 지정하지 않은 경우 y축으로 기본 설정되는 축이다.
x축에서도 category 축로 생성될 수 없는 경우이면 이 축으로 생성된다.
설정
축의 종류를 "linear"로 지정한다. 또, 설정 옵션 모델은 LinearAxisOptions이고, 차트 구성 요소 모델은 LinearAxis이다.
const config = {
xAxis: {
type: 'linear',
},
};linear 축은 카테고리 축과 달리 명시적으로 축 상의 영역을 구분하지 않으므로, 몇 개의 tick들을 표시해서 데이터포인트의 위치를 짐작할 수 있도록 하는 데, tick 구성에 대한 여러가지 방법을 제공한다. tick들을 배치하기 위해서는 우선 축의 범위가 결정돼야 한다.
축 범위(최소/최대값)
축 표시 범위는 기본적으로 축에 연결된 시리즈들의 값을 모두 수집한 후 계산된 값과,
minPadding, maxPadding 설정 값으로 자동 결정된다.
하지만, 시리즈들의 값과 상관없이 의도한 범위가 있다면 두 가지 방식으로 범위를 지정할 수 있다.
minValue, maxValue는 각각 최소/최대값에 대한 힌트를 제공한다.
즉, 계산된 최소값이 minValue보다 크면 최소값이 minValue로 설정되고,
계산된 최대값이 maxValue보다 작으면 최대값이 maxValue로 설정된다. 이렇게 설정된 최소/최대값에 minPadding, maxPadding이 적용된다.
stricMin, strictMax는 계산된 값을 무시하고 최소/최대값으로 설정되며,
minPadding, maxPadding도 무시된다.
Tick 배치
축 범위가 결정되면 tick 배치가 필요한데, 기본적으로는 축 tick 모델의 stepPixels에 설정된
크기를 기준으로 가능한 10 배수의 값이 되도록 tick들을 생성한다.
tick 목록을 생성하는 우선 순위는 아래와 같다.
- steps에 명시적인 스텝 목록이 있으면 그대로 표시한다.
- baseAxis가 설정되면 base 축의 tick 개수대로 생성한다.
- stepCount에 설정된 개수대로 생성한다.
- tickInterval에 설정된 값 간격으로 tick들을 생성한다.
- 위에서 언급한 stepPixels과 대략 비슷한 간격대로 tick들을 생성한다.
- 위 속성들이 하나도 설정되지 않은 경우 최소, 최대 위치에 두 개 혹은 한 개의 tick을 생성한다.