레이블

차트에 레이블(데이터 값)을 표시하는 방법은 차트의 종류마다 조금씩 다릅니다. 하지만 모든 차트에 공통적으로 적용되는 속성이 있는데, 이는 레이블이 표시되는 위치를 지정하는 labelPosition 속성입니다. 다음은 차트의 유형별로 labelPosition 속성에 설정할 수 있는 값을 나타내는 표입니다.

차트 종류	유효값 (*: 기본값)	설명
영역 차트, 라인 차트	up, down, both, none(*)	up: 데이터 포인트 위에 레이블을 표시합니다. down: 데이터 포인트 아래에 레이블을 표시합니다. both: 데이터 포인트 위, 아래에 레이블을 표시합니다. none: 레이블을 표시하지 않습니다.
바 차트, 컬럼 차트, 이미지 차트, 윙 차트	inside, outside, both, none(*)	inside: 바(칼럼) 안에 레이블을 표시합니다. outside: 바(칼럼) 밖에 레이블을 표시합니다. both: 바(칼럼) 안과 밖에 레이블을 표시합니다. none: 레이블을 표시하지 않습니다.
파이 차트	inside, outside, callout, insideWithCallout, none(*)	inside: 슬라이스 안에 레이블을 표시합니다. outside: 슬라이스 밖에 레이블을 표시합니다. callout: 슬라이스 밖에 레이블을 표시하고 지시선으로 해당 슬라이스와 연결합니다. insideWithCallout: 기본적으로 슬라이스 안에 레이블을 표시하고, 레이블이 겹칠 경우 callout 방식으로 레이블을 표시합니다. none: 레이블을 표시하지 않습니다.
버블 차트, 매트릭스 차트	inside, none(*)	inside: 버블(매트릭스) 안에 레이블을 표시합니다. none: 레이블을 표시하지 않습니다.
피라미드 차트	inside(*), callout, none	inside: 영역 안에 레이블을 표시합니다. callout: 영역 밖에 레이블을 표시하고 지시선으로 해당 영역과 연결합니다. none: 레이블을 표시하지 않습니다.
방사형 차트	outside, none(*)	outside: 영역 밖에 레이블을 표시합니다 none: 레이블을 표시하지 않습니다.

다음 이미지는 labelPosition 속성값을 “up” 으로 적용해서 출력한 라인 차트의 예제입니다.

바 차트(혹은 컬럼 차트)는 labelPosition 속성값이 “inside” 일 때 바(칼럼)의 어느 위치에 레이블을 표시할지를 지정할 수 있습니다. 이는 labelAlign 속성값을 이용하여 가능합니다. 다음은 바 차트(혹은 컬럼 차트)에서 labelAlign 속성에 설정할 수 있는 값을 나타내는 표입니다.

차트 종류

유효값 (*: 기본값)

설명

바 차트

left, center(*), right

left: 바의 왼쪽끝에 레이블을 표시합니다.

center: 바의 중앙에 레이블을 표시합니다.

right: 바의 오른쪽 끝에 레이블을 표시합니다.

컬럼 차트

top, middle(*), bottom

top: 칼럼의 상단에 레이블을 표시합니다.

middle: 칼럼의 중앙에 레이블을 표시합니다.

bottom: 칼럼의 하단에 레이블을 표시합니다.

다음 이미지는 위 속성값을 적용하여 출력한 3D 컬럼 차트의 예입니다.

<Column3DSeries labelPosition="inside" labelAlign="top" yField="Profit" color="#fff" />
<Column3DSeries labelPosition="inside" labelAlign="middle" yField="Cost" color="#fff" />
<Column3DSeries labelPosition="inside" labelAlign="bottom" yField="Revenue" color="#fff" />

다음 이미지는 labelPosition 속성값을 “insideWithCallout” 으로 적용해서 출력한 파이 차트의 예입니다.

레이블 위치 조정하기

레이블이 표시되는 위치는 위에서 설명한 labelPosition 속성과 labelAlign 속성에 의해서 자동으로 정해지지만 경우에 따라서 레이블의 위치를 사용자가 원하는 위치로 조정해야 할 필요가 있을 수 있습니다. 이 경우에 사용할 수 있는 속성이 labelXOffset 과 labelYOffset 입니다. 레이블의 가로 위치를 조정하고자 할 경우에는 labelXOffset 속성을 레이블의 세로 위치를 조정하고자 할 경우에는 labelYOffset 속성을 설정합니다.

주의: 바(칼럼) 차트에서는 labelPosition 속성값이 “inside” 이면 해당 속성명이 insideLabelXOffset 과 insideLabelYOffset 이며, labelPosition 속성값이 “outside” 이면 해당 속성명이 outsideLabelXOffset 과 outsideLabelYOffset 입니다.; 라인(영역) 차트에서는 labelPosition 속성값이 “up” 이면 해당 속성명이 upLabelXOffset 과 upLabelYOffset 이며, labelPosition 속성값이 “down” 이면 해당 속성명이 downLabelXOffset 과 downLabelYOffset 입니다.

레이블 겹침 방지

데이터 포인트의 수가 많은 경우 이웃 레이블들이 서로 겹쳐서 표현되는 경우가 있습니다. 이웃 레이블들이 서로 겹치지 않도록 하기 위해서는 시리즈 노드의 canDropSeriesLabels 속성값을 “true” 로 설정하면 됩니다. 다음은 플롯 차트에서 canDropSeriesLabels 속성값을 “true” 로 설정하여 이웃 레이블들의 겹침을 방지하는 코드와 이를 적용해서 출력한 차트의 예제입니다.

<Plot2DChart showDataTips="true" dataTipMode="single" canDropSeriesLabels="true">
  <verticalAxis>
    <LinearAxis formatter="{numfmt}"/>
  </verticalAxis>
  <series>
    <Plot2DSeries labelPosition="up" yField="Profit" xField="Cost">
    </Plot2DSeries>
  </series>
</Plot2DChart>	

See the CodePen 알메이트 차트 - 레이블 겹침 방지

사용자 정의 레이블 표현하기

자바스크립트 함수(사용자 정의 함수)를 이용해서 텍스트를 포맷팅한 후 이를 리턴한 값을 레이블로 표시할 수 있습니다. 사용자 정의 함수에 대한 자세한 사용법은 사용자 정의 함수 사용하기를 참조하십시요. 사용자 정의 함수를 이용해서 레이블을 표현하기 위해서는 시리즈 노드(예, <Column2DSeries>)의 insideLabelJsFunction 속성값(labelPosition 속성값이 “inside” 인 경우)에 실행할 자바스크립트 함수명을 지정하고, 해당 함수의 코드를 작성해야 합니다. 스택 다중 시리즈 컬럼 차트에서는 각 시리즈의 데이터 합계를 함께 표시하는 경우가 많은데, 합계값을 사용자 정의 함수로 표현하기 위해서는 totalLabelJsFunction 속성값에 실행할 자바스크립트 함수명을 지정하고, 해당 함수의 코드를 작성해야 합니다. 다음은 화폐 기호($)를 레이블과 합계 레이블에 표현하기 위한 코드와 이를 적용해서 출력한 차트의 예제입니다.

<Column2DSet type="stacked" showTotalLabel="true" totalLabelJsFunction="totalLabelFunc">
  <series>
    <Column2DSeries labelPosition="inside" yField="goods" insideLabelJsFunction="seriesLabelFunc" color="#ffffff" />
    <Column2DSeries labelPosition="inside" yField="income" insideLabelJsFunction="seriesLabelFunc" color="#ffffff" />
    <Column2DSeries labelPosition="inside" yField="service" insideLabelJsFunction="seriesLabelFunc" color="#ffffff" />
  </series>
</Column2DSet>
...
function seriesLabelFunc(seriesID, index, data, values) {
    return "$" + values[1];
}
function totalLabelFunc(index, data, total){
   return "$" + total;
}

See the CodePen 알메이트 차트 - 사용자 정의 레이블 표현하기

목차

레이블

레이블 위치 조정하기

레이블 겹침 방지

사용자 정의 레이블 표현하기