포맷터 사용하기

알메이트 차트는 통화(<CurrencyFormatter> 노드), 날짜(<DateFormatter> 노드) 그리고 숫자(<NumberFormatter> 노드)에 대한 포맷을 사용자가 원하는 형태로 표시할 수 있도록 설정하는 기능을 제공합니다. 포맷터 노드를 <rMateChart> 노드의 자식 노드로 정의하고 포맷터 노드의 id 속성값을 지정한 후, 포맷터의 적용이 필요한 노드(예, 숫자 축의 레이블에 포맷터를 적용한다면 <LinearAxis> 노드)의 formatter 속성에 포맷터 노드의 id 속성값을 지정하여 포맷터를 적용할 수 있습니다.

통화 포맷터

통화 포맷터(<CurrencyFormatter> 노드)를 통해서 사용자가 원하는 형태의 통화 표시를 할 수 있습니다. 다음 표는 <CurrencyFormatter> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
alignSymbol	left(*), right	currencySymbol 속성에 지정된 통화 기호를 숫자를 기준으로 어디에 표시할지를 설정합니다.
currencySymbol	텍스트	통화 기호를 지정합니다.
decimalSeparatorTo	텍스트 기본값: dot (.)	소수점 구분 기호를 지정합니다.
id	텍스트	<CurrencyFormatter> 노드의 식별자를 지정합니다.
precision	숫자 기본값: -1	소수점 구분 기호의 오른쪽에 표시될 숫자의 최대 자리수를 설정합니다. -1: 표시 가능한 모든 소수점이하 숫자를 표시합니다.
rounding	down, up, nearest, none(*)	반올림 방법을 설정합니다.
thousandsSeparatorTo	텍스트 기본값: comma (,)	천단위 구분자를 지정합니다.
useNegativeSign	true(*), false	음수 표시를 위해서 마이너스 기호(-)를 표시할지 여부를 설정합니다.
useThousandsSeparator	true(*), false	천단위 구분자를 표시할지 여부를 설정합니다.

다음은 세로 축(Y 축)의 레이블에 통화 포맷터를 적용한 예제입니다.

<CurrencyFormatter id="fmt" currencySymbol="￥" alignSymbol="left"/>
...
<verticalAxis>
  <LinearAxis id="vAxis" interval="500" formatter="{fmt}"/>
</verticalAxis>

See the CodePen 알메이트 차트 - 세로 축(Y 축)의 레이블에 통화 포맷터 적용

날짜 포맷터

날짜 포맷터(<DateFormatter> 노드)를 통해서 사용자가 원하는 형태의 날짜 표시를 할 수 있습니다. 다음 표는 <DateFormatter> 노드의 주요 속성에 대한 설명입니다.

속성명

유효값 (*: 기본값)

설명

formatString

텍스트

표시할 날짜 형식을 설정합니다.

Y	연(Year)	YY=05, YYYY=2005
M	월(Month)	M=7, MM=07, MMM=Jul
D	일(Day)	D=4, DD=05
H	시(Hour)	H=1, HH=01
N	분(Minute)	N=1, NN=01
S	초(Second)	SS=30

id

텍스트

<DateFormatter> 노드의 식별자를 지정합니다.

다음은 가로 축(X 축)의 레이블에 날짜 포맷터를 적용한 예제입니다.

<DateFormatter id="dateFmt" formatString="YYYY-MM-DD"/>
...
<horizontalAxis>
  <DateTimeAxis id="hAxis" formatter="{dateFmt}" dataUnits="days" labelUnits="days" interval="4" alignLabelsToUnits="false" displayLocalTime="true"/>
</horizontalAxis>

See the CodePen 알메이트 차트 - 가로 축(X 축)의 레이블에 날짜 포맷터 적용

숫자 포맷터

숫자 포맷터(<NumberFormatter> 노드)를 통해서 사용자가 원하는 형태의 숫자 표시를 할 수 있습니다. 다음 표는 <NumberFormatter> 노드의 주요 속성에 대한 설명입니다.

속성명	유효값 (*: 기본값)	설명
decimalSeparatorTo	텍스트 기본값: dot (.)	소수점 구분 기호를 지정합니다.
id	텍스트	<NumberFormatter> 노드의 식별자를 지정합니다.
precision	숫자 기본값: -1	소수점 구분 기호의 오른쪽에 표시될 숫자의 최대 자리수를 설정합니다. -1: 표시 가능한 모든 소수점이하 숫자를 표시합니다.
rounding	down, up, nearest, none(*)	반올림 방법을 설정합니다.
thousandsSeparatorTo	텍스트 기본값: comma (,)	천단위 구분자를 지정합니다.
useNegativeSign	true(*), false	음수 표시를 위해서 마이너스 기호(-)를 표시할지 여부를 설정합니다.
useThousandsSeparator	true(*), false	천단위 구분자를 표시할지 여부를 설정합니다.

다음은 세로 축(Y 축)의 레이블에 천단위 구분자를 표시하기 위해서 숫자 포맷터를 적용한 예제입니다.

<NumberFormatter id="numfmt" useThousandsSeparator="true"/>
...
<verticalAxis>
  <LinearAxis interval="500" formatter="{numfmt}"/>
</verticalAxis>

See the CodePen 알메이트 차트 - 세로 축(Y 축)의 레이블에 천단위 구분자 표시

목차

포맷터 사용하기

통화 포맷터

날짜 포맷터

숫자 포맷터