축과 스케일

알메이트 차트에서 제공되는 축의 종류는 다음과 같습니다.

• 숫자 축(Numeric Axis) : 숫자를 표현하는 축입니다. <LinearAxis>, <LogAxis>, <DateTimeAxis>, <BrokenAxis> 유형이 지원됩니다.
• 카테고리 축(Category Axis) : 수치화되지 않은 카테고리를 표현하는 축입니다. <CategoryAxis>, <CategoryLinearAxis>, <HistogramCategoryAxis> 유형이 지원됩니다.
• 컬러 축(Color Axis) : 트리맵 차트에서 색과 데이터 값을 연관시켜 표현하는 축의 유형입니다. <ColorAxis> 유형이 지원됩니다.

숫자 축

1. <LinearAxis> - 숫자 축에서 가장 활용도가 높은 축의 유형입니다. 숫자 레이블의 간격, 최대값, 최소값은 적용되는 데이터의 값에 따라서 자동으로 설정되고, 제공되는 속성을 이용하여 사용자가 원하는 숫자 레이블의 간격, 최대값, 최소값 등을 설정할 수 있습니다. 다음 표는 <LinearAxis> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
interval	숫자	축에 표시되는 레이블의 간격을 지정합니다.
labelJsFunction	자바스크립트 함수명	사용자 정의 함수를 이용하여 축의 레이블을 표시할 경우, 해당 자바스크립트 함수명을 지정합니다.
maximum	숫자	축의 최대값을 지정합니다.
minimum	숫자	축의 최소값을 지정합니다.
title	텍스트	축의 제목을 지정합니다.

다음은 세로 축(<verticalAxis> 노드)에 <LinearAxis> 노드를 설정하여 컬럼 차트를 생성하는 예제입니다. 이 예제에서는 가로 축(<horizontalAxis> 노드)에 <CategoryAxis> 노드가 설정되었습니다.

See the CodePen 알메이트 차트 - Y 축에 LinearAxis, X 축에 CategoryAxis 설정

2. <LogAxis> - 로그 축은 축 레이블의 간격이 설정된 값의 10 의 지수로 계산된 숫자 축으로써 큰 숫자의 데이터를 차트에 표현할 때 유용하게 활용됩니다. 다음 표는 <LogAxis> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
interval	숫자	축에 표시되는 레이블의 간격을 지정합니다. 지정된 값의 로그값(상용 로그)을 10 의 지수로 계산한 값이 레이블 간격이 됩니다.
labelJsFunction	자바스크립트 함수명	사용자 정의 함수를 이용하여 축의 레이블을 표시할 경우, 해당 자바스크립트 함수명을 지정합니다.
maximum	숫자	축의 최대값을 지정합니다. 지정된 값의 로그값(상용 로그)을 10 의 지수로 계산한 값이 레이블 간격이 됩니다.
minimum	숫자	축의 최소값을 지정합니다. 지정된 값의 로그값(상용 로그)을 10 의 지수로 계산한 값이 레이블 간격이 됩니다.
title	텍스트	축의 제목을 지정합니다.

주의

로그 축에 설정된 간격, 최대값, 최소값이 축에 표현될 때는 해당값의 로그값(상용 로그)을 10의 지수로 계산한 값이 실제 표시되는 값이 됩니다. 예를 들면, minimum=“5” 와 같이 설정이 되었다면, 5 에 대한 로그값은 0.7 이고, 이 값의 반올림인 1 을 10 의 지수로 계산한 10 이 축에 표현됩니다. interval=”100”으로 설정되었다면, 100 의 로그값인 2 를 10 의 지수로 계산한 값의 단위에 의해서 간격이 표시됩니다. (10, 1,000, 100,000, …)

3. <DateTimeAxis> - 날짜와 시간을 표현하는 축의 유형입니다. 다음 표는 <DateTimeAxis> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
dataInterval	숫자	dataUnits 속성에 지정된 단위로 차트에 표시할 데이터의 간격을 지정합니다. 예를 들어, dataUnits=”seconds” 이고, 3 초의 데이터 단위로 차트를 표현하고자 한다면 dataInterval=”4” 로 지정합니다. (차트의 종류에 따라서 이 속성은 무시됩니다.)
dataUnits	milliseconds, seconds, minutes, hours, days, weeks, months, years	데이터의 표시 단위를 지정합니다.
displayLocalTime	true, false(*)	true: 클라이언트 PC 의 타임 존을 적용합니다. false: 세계 표준시 (그리니지 표준시)를 적용합니다.
interval	숫자	축에 표시되는 레이블의 간격을 지정합니다. (레이블이 표시될 공간이 충분하지 않으면 이 값은 무시됩니다.)
labelJsFunction	자바스크립트 함수명	사용자 정의 함수를 이용하여 축의 레이블을 표시할 경우, 해당 자바스크립트 함수명을 지정합니다.
labelUnits	milliseconds, seconds, minutes, hours, days, weeks, months, years	축 레이블의 표시 단위를 지정합니다.
title	텍스트	축의 제목을 지정합니다.

주의

<DateTimeAxis>를 적용하기 위해서는 해당 데이터 시리즈의 field 속성 (예, 라인 차트의 수평축에 <DateTimeAxis> 를 적용할 경우, <Line2DSeries> 노드의 xField 속성)에 반드시 축의 값으로 적용할 데이터 필드명을 지정해야 합니다. 이 때 데이터 필드의 값은 자바스크립트 Date 함수로 변환 가능한 포맷을 가지고 있어야 합니다. (예, YYYY-MM-DD, YYYY/MM/DD, MM-DD-YYYY, etc)

다음은 수평축에 <DateTimeAxis> 를 수직축에 <LogAxis> 를 적용한 예제입니다. 아래 예제에서는 데이터 시리즈 (<Line2DSeries> 노드)의 xField 속성에 날짜/시간 축에 표시될 데이터 필드(Date)가 지정되었습니다.

See the CodePen 알메이트 차트 - X 축에 DateTimeAxis 설정

4. <BrokenAxis> - 브로큰 축 차트에서 브로큰 축을 표현하는 축의 유형입니다. 다음 표는 <BrokenAxis> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
brokenMaximum	숫자 기본값: NaN	브로큰 축의 최대값(두 번째 물결무늬가 표시되는 축 상의 지점)을 지정합니다.
brokenMaximumInterval	숫자 기본값: NaN	브로큰 축의 최대값(brokenMaximum)보다 큰 값들이 축에 표시되는 간격을 지정합니다.
brokenMinimum	숫자 기본값: NaN	브로큰 축의 최소값(첫 번째 물결무늬가 표시되는 축 상의 지점)을 지정합니다.
brokenMinimumInterval	숫자 기본값: NaN	브로큰 축의 최소값(brokenMinimum)보다 작은 값들이 축에 표시되는 간격을 지정합니다.
brokenOffset	숫자 기본값: 14	두 물결무늬 사이의 간격을 지정합니다.
brokenRatio	0 과 1 사이의 숫자 기본값: 0.5	축의 시작 지점에서 브로큰 축의 최소값까지의 크기와 브로큰 축의 최대값에서 축의 끝 지점까지의 크기의 비율을 지정합니다.

다음은 수평축에 <CategoryAxis> 를 수직축에 <BrokenAxis> 를 적용한 예제입니다.

See the CodePen 알메이트 차트 - Y 축에 BrokenAxis 설정

카테고리 축

1. <CategoryAxis> - 숫자가 아닌 카테고리를 표현하는 축의 유형입니다. 예를 들면, 연도별, 월별, 부서별, 국가별 등과 같이 수치로 표현되지 않고 카테고리의 항목들이 열거되는 형태입니다. <CategoryAxis> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
categoryField	텍스트	카테고리 값이 저장된 데이터 필드명을 지정합니다.
labelJsFunction	자바스크립트 함수명	사용자 정의 함수를 이용하여 축의 레이블을 표시할 경우, 해당 자바스크립트 함수명을 지정합니다.
title	텍스트	축의 제목을 지정합니다.

카테고리 축에 대한 예제는 위에서 설명된 <BrokenAxis> 예제를 참조하십시요. 이 예제에서는 수직축에 카테고리 축이 적용되었고, categoryField 속성값으로 “Month” 필드가 지정되었습니다.

2. <CategoryLinearAxis> - 카테고리 축을 스크롤 차트에 표현해야 할 경우 <CategoryAxis> 노드를 사용하지 않고 <CategoryLinearAxis> 노드를 사용해야 합니다. 다음은 스크롤 차트의 수평축에 <CategoryLinearAxis> 노드가 적용된 예제입니다.

See the CodePen 알메이트 차트 - X 축에 CategoryLinearAxis 설정

3. <HistogramCategoryAxis> - 히스토그램 차트의 X 축을 표현하는 축의 유형입니다. 다음은 히스토그램 차트에 <HistogramCategoryAxis> 노드가 적용된 예제입니다.

See the CodePen 알메이트 차트 - X 축에 HistogramCategoryAxis 설정

컬러 축

컬러 축은 트리맵 차트에서 색과 데이터 값을 연관시켜 표현하는 축의 유형입니다. 다음은 트리맵 차트에서 컬러 축이 표현된 예제입니다. 이 예제에서는 색의 범위를 colors 속성에 “[#fcd26b,#cc3635]” 으로 지정하였습니다. 최소값(minimum=“0”)의 색은 #fcd26b 이고, 최대값(maximum=“400”)의 색은 “#cc3635” 이며, 컬러축에는 100 (interval=“100”) 단위로 레이블이 표시됩니다. 사각형에 표시되는 색은 컬러축과 데이터 값이 연동되어 자동으로 표시됩니다.

See the CodePen 알메이트 차트 - 컬러 축

축의 위치 속성

위에서 설명한 축의 유형들은 차트 노드의 축의 위치 속성의 자식 노드에 정의되어야 합니다. 다음은 축의 위치 속성들을 열거한 표입니다.

속성명	적용되는 차트 유형	설명
<horizontalAxis>	카테시안 계열의 차트	카테시안 계열의 차트에서 수평축 (X 축)
<verticalAxis>	카테시안 계열의 차트	카테시안 계열의 차트에서 수직축 (Y 축)
<angularAxis>	방사형 차트, 윈드로즈 차트	방사형 차트, 윈드로즈 차트에서 바깥쪽 원호에 표시되는 카테고리 축
<radialAxis>	방사형 차트, 윈드로즈 차트	방사형 차트, 윈드로즈 차트에서 중심에서 원호까지 직선으로 표시되는 숫자 축
<colorAxis>	트리맵 차트	a href="treemap-chart.html">트리맵 차트에 표시되는 컬러 축

축 렌더러

알메이트 차트에서 축의 스타일은 사용자의 기호에 따라서 다양하게 표현이 가능합니다. 축의 색상, 틱, 보조틱, 축의 레이블, 축 제목의 폰트 등 모든 축의 표현 방식은 축 렌더리 노드에 설정됩니다. 다음은 알메이트 차트에서 제공하는 축 렌더러의 종류들을 열거한 표입니다.

축 렌더러	설명
<AngularAxisRenderer>	방사형 차트, 윈드로즈 차트에서 <angularAxis>를 표현하는 렌더러입니다.
<Axis2DRenderer>	2 차원 축을 표현하는 렌더러입니다.
<Axis3DRenderer>	3 차원 축을 표현하는 렌더러입니다.
<Axis2DWingRenderer>	윙 차트에서 2차원 축을 표현하는 렌더러입니다.
<BrokenAxis2DRenderer>	브로큰 축 차트에서 2 차원 축을 표현하는 렌더러입니다.
<BrokenAxis3DRenderer>	브로큰 축 차트에서 3 차원 축을 표현하는 렌더러입니다.
<HistogramAxis2DRenderer>	히스토그램 차트에서 2 차원 축을 표현하는 렌더러입니다.
<ScrollableAxisRenderer>	스크롤 차트에서 스크롤이 가능한 축을 표현하는 렌더러입니다.

축 렌더러의 활용 방식과 예제에 대한 자세한 설명은 축 스타일링과 축 레이블을 참조하십시요.

다중 축 표시

한 차트에서 두 개 이상의 축을 표시해서 데이터 시리즈별로 서로 다른 특정한 축을 기준으로 데이터를 표현하도록 지정할 수 있습니다. 콤비네이션 차트와 같이 서로 다른 유형의 데이터 시리즈가 적용되거나, 동일한 차트에서 데이터 시리즈별로 다른 스케일의 축을 적용하고 싶은 경우에 활용이 가능합니다. <series> 노드의 형제 노드에 정의된 축이 기본적으로 모든 데이터 시리즈에 적용되고, 특정 데이터 시리즈는 기본 축이 아닌 다른 축을 적용하고자 할 경우에는 해당 데이터 시리즈의 자식 노드에 원하는 축을 정의하면 됩니다. 이 때 축 렌더러 노드에서 어떤 축을 표현할지에 대한 구별은 축 정의시에 설정하는 id 속성을 이용합니다. 축의 id 속성값을 중괄호(브레이스, {})로 묶은 값을 렌더러의 axis 속성값으로 설정합니다. 다음은 컬럼 시리즈는 기본축(vAxis1)을 적용하고 라인 시리즈는 레이블 간격이 400 인 별도의 축을 해당 데이터 시리즈의 자식 노드로 정의하여 적용한 예제입니다.

See the CodePen 알메이트 차트 - 다중 축 표시

역 Y 축

수직 Y 축에서 최소값이 시작되는 위치를 차트의 하단이 아닌 차트의 상단에 둘 수 있습니다. 이를 역 Y 축이라고 합니다. 역 Y 축을 차트에 표시하기 위해서는 <LinearAxis> 노드의 direction 속성값을 “inverted” 로 지정합니다. 이 때 수평 X 축도 차트의 상단에 위치시키는 것이 좋습니다. 이를 위해서는 축 렌더러 노드의 placement 속성값을 “top” 으로 지정해야 합니다. 다음은 <Axis2DRenderer> 노드의 placement 속성값을 “top” 으로 지정한 역 Y 축에 대한 예제입니다.

See the CodePen 알메이트 차트 - 역 Y 축