Category Axis
축을 몇 개의 범주(category)로 분할해서 각 범주에 연결된 시리즈의 데이터포인트들을 범주 내에 배치한다.
각 카테고리는 격리되어 있으며, 카테고리 하나가 1의 값을 갖는다.
기본적으로 개별 카테고리의 너비(간격)나 카테고리들 사이의 순서는 크기(값)로는 아무런 의미가 없다.
카테고리 중앙이 카테고리의 값에 해당하는 위치이고 축에 연결된 데이터포인트들이 그 위치를 기준으로 표시된다.
모든 카테고리의 너비는 기본적으로는 동일하지만 개별적으로 다르게 표시할 수도 있다.
차트 설정에서 x축의 type을 지정하지 않으면 시리즈 종류에 따라 카테고리 축으로 자동 설정된다.
'bar', 'circlebar', 'candlestick', 'dumbbell', 'lollipop', 'equazlier', 'waterfall', 'heatmap' 시리즈들이
category x축에 표시 가능하다. 둘 이상의 시리즈가 존재할 때 이 시리즈들 종류가 아닌 것이 포함되어 있으면 'linear'로 생성된다.
물론, 축 'type'이 설정되면 그 종류대로 생성된다.
카테고리 축 label에는 숫자 대신 카테고리를 대표하는 이름을 표시할 수 있다.
즉, 축 label에 대표 이름을 표시해야 하는 경우라면 'linear' 대신 카테고리 축을 고려해야 한다.
설정
축의 type을 명시적으로 "category"로 지정하거나,
type을 지정하지 않고, "categories" 배열을 설정해도 카테고리 축으로 생성된다.
또, 설정 옵션 모델은 CategoryAxisOptions이고,
차트 구성 요소 모델은 CategoryAxis이다.
categories 목록을 지정하지 않으면, 연결된 시리즈들의 data로부터 목록을 생성한다.
하지만, 'categories' 목록을 지정하지 않고 축에 연결된 시리즈들로부터 카테고리 목록을 자동 생성하면,
시리즈들이 모두 사라지는 경우 카테고리 목록 역시 사라지므로,
기대하는 카테고리 목록을 고정 표시하려는 경우 'categories' 목록을 명시적으로 설정하는 것이 좋다.
카테고리축 또한 2차원 좌표계의 축이므로 축 상의 값을 가져야 하는데,
생성된 목록의 첫번째 카테고리의 값이 0이고,
카테고리 영역 중간 지점이 카테고리 값의 표시 위치가 된다.
const config = {
xAxis: {
type: 'category',
},
};
const config = {
xAxis: [{
name: 'axis1',
categories: ["성남시", "용인시", ...]
}, {
name: 'axis2',
}]
};
카테고리 축에 연결된 시리즈는 data 설정에서 데이터포인트마다 연결할 category를 지정할 수 있다.