축(Axis)

2차원 평면

RealChart를 포함한 차팅 툴들은 기본적으로 2차원 평면 위에 데이터를 표시한다. 2차원 평면은 X/Y 두 축으로 구성되며, 두 축이 직각으로 교차하는 직교 좌표, x축의 각도를 기준으로 표시 지점을 결정하는 극좌표가 있다.
직교 좌표계에서 x축이 수평, y축이 수직으로 표시되는 것이 기본이지만, 차트의 inverted를 true로 지정하면 y축이 수평, x축이 수직으로 표시되고, 그에 따라 데이터포인트들의 표시 위치 방향도 달라지게 된다.

설정

차트 설정에서 두 축은 각각 'xAxes'(또는, 'xAxis'), 'yAxes'(또는, 'yAxis') 이름으로 설정하고 (목록으로 설정하는 다른 구성 요소의 경우와 같이 단/복수 형 모두 가능하지만 복수형이 우선한다.), 축의 종류는 'type' 속성으로 지정한다. 특별히 지정하지 않으면 y축은 'linear', x축은 시리즈 종류에 따라 자동 설정되지만, 명시적으로 종류를 지정하는 것이 좋다. 축이 둘 이상이면 배열로 지정하고, 하나면 배열 없이 지정해도 된다.

const config = {
  xAxes: [{
    type: 'time',
  }],
  yAxes: {
    type: 'linear',
  },
};

const config = {
  xAxis: {
    type: 'time',
  },
  yAxis: [{
    type: 'linear',
  }],
};

양 방향 축은 둘 이상일 수 있는데 각각 배열로 여러 축을 설정한다.

const config = {
  xAxis: [
    {
      type: 'time',
    },
    {},
  ],
  yAxis: [
    {
      type: 'linear',
    },
  ],
};

축 연결이 필수적인 시리즈들은 기본적으로 첫번째 x, y 축에 연결되는 데, 시리즈의 xAxis, yAxis 속성에 축 index를 지정해서 다른 축에 연결할 수 있다. 첫번째 축의 index가 0이다.

축의 type이 명시적으로 지정되지 않으면, 먼저 categories 설정된 경우 'category' 축으로 생성되고, 그 다음엔 축에 연결된 시리즈 종류에 따라 축의 종류가 결정된다. x축인 경우 모두 카테고리 축에 연결 가능한 시리즈이면 'category' 축으로, 아니면 'linear' 축으로 생성된다. y축은 'linear' 축으로 기본 생성된다.

시리즈별 기본 x축 종류

틱(Ticks)

2차원 플로팅 영역(body)에 표시되는 데이터포인트들의 값을 직관적으로 판단하는 데 도움이 될 수 있도록 양 축을 몇 개의 섹션으로 나누고, 구분되는 위치에 tick 선과 label을 표시한다. 이 때, tick 간격을 어떤 크기로 지정할 것인 지가 중요한 요소가 되는 데, 관련된 별도의 설정을 하지 않으면 RealChart는 기본 설정을 바탕으로 자동으로 간격을 계산한다.
자동 계산 방식은 축 종류에 따라 다르다.

라벨(Labels)

tick 배치가 정해지면 기본적으로 tick 위치마다 해당 값을 나타내는 텍스트를 표시한다. 다만, 수평 축의 경우 표시할 텍스트들이 겹치게 되면 기본 설정에 따라 텍스트를 회전시키거나, label들을 건너띄어 가면서 표시한다. 자동 설정되는 겹침 방지 방식이 원하는 것이 아니면 명시적으로 속성을 지정해서 겹치지 않도록 할 수 있다.
tick 라벨들도 중요한 정보이므로 최대한 정확하게 표시하는 것을 권장한다.

그리드(Grid)

tick 위치마다 수평 또는 수직선이 표시된다.

가이드(Guide)

축 상의 특정한 값 또는 값 범위 영역을 선분이나 박스로 구분되게 표시한다.

See Also

• 시리즈 개요
• Data 개요
• 차트 Configuration