범례

차트에 표현되는 데이터 시리즈가 여러 개일 경우 범례를 사용하여 차트의 이해도를 높일 수 있습니다. 알메이트 차트에서 범례는 <Options> 노드의 자식으로 <Legend> 노드를 정의하여 생성할 수 있습니다. 다음은 범례를 차트의 하단(기본값)에 표시하는 예제입니다.

<Options>
  <Legend useVisibleCheck="true" horizontalGap="0" position="bottom" horizontalScrollPolicy="off"/>
</Options>
...
<Line2DSeries yField="Data1" radius="6" displayName="Data1" itemRenderer="DiamondItemRenderer" fill="#ffffff">
...

See the CodePen 알메이트 차트 - 차트 하단에 범례 표시

다음은 <Legend> 노드의 주요 속성들을 설명한 표입니다.

속성명	유효값 (*: 기본값)	설명
borderColor	#16진수 컬러 코드 표기 기본값: #000000	범례 테두리 선의 색을 지정합니다.
borderStyle	none(*), solid	범례 테두리 선의 스타일을 설정합니다.
defaultMouseOverAction	true, false(*)	사용자가 마우스를 특정 범례 항목에 올려두었을 때, 해당 데이터 시리즈 이외의 다른 데이터 시리즈는 흐리게 표시할지 여부를 설정합니다.
direction	horizontal(*), vertical	범례 항목의 표시 방향을 설정합니다.
hAlign	left, center(*), right	범례 항목의 수평 정렬 방식을 설정합니다. Position 속성값이 “top” 혹은 “bottom” 일 경우에만 유효합니다.
horizontalScrollPolicy	on, off(*)	범례에 수평 스크롤바를 표시할지 여부를 설정합니다.
itemClickJsFunction	자바스크립트 함수명	사용자가 범례 항목을 클릭할 경우 실행될 자바스크립트 함수명을 지정합니다.
position	left, right, top, bottom(*)	차트에서 범례의 위치를 지정합니다.
useVisibleCheck	true, false(*)	사용자가 범례 항목을 클릭할 경우 해당 항목의 데이터 시리즈에 대한 보이기 / 감추기를 설정합니다.
vAlign	top, middle(*), bottom	범례 항목의 수직 정렬 방식을 설정합니다. Position 속성값이 “left” 혹은 “right” 일 경우에만 유효합니다.
verticalScrollPolicy	on, off(*)	범례에 수직 스크롤바를 표시할지 여부를 설정합니다.
width	숫자	범례의 가로 크기를 지정합니다.

주의: 범례의 항목으로 표시되는 텍스트는 데이터 시리즈의(예, <Line2DSeries> 노드) displayName 속성에 지정된 값입니다. 따라서 반드시 데이터 시리즈의 displayName 속성을 지정하여야 범례에서 항목명이 표시됩니다. 위 예제의 첫 번째 데이터 시리즈(yField=“Data1”)에서 displayName=“Data1” 과 같이 설정되었습니다.

범례의 위치

범례의 기본 위치는 차트의 하단입니다. 따라서 범례의 position 속성값을 설정하지 않으면 자동으로 차트의 하단에 범례가 표시됩니다. 따라서 범례의 position 속성값을 설정하지 않으면 자동으로 차트의 하단에 범례가 표시됩니다. 다음은 범례의 위치를 차트의 우측에(position=“right”) 위치하게 하는 예제입니다. 이 예제에서는 항목들이 수직으로(direction=“vertical”) 표시되고 항목의 텍스트가 항목의 마커 위에(labelPlacement=“top”) 표시되도록 설정되었습니다.

<Options>
  <Legend position="right" direction="vertical" labelPlacement="top" useVisibleCheck="true"/>
</Options>

See the CodePen 알메이트 차트 - 차트 우측에 범례 표시

데이터 시리즈 보이기 / 숨기기

범례의 항목을 클릭했을 때 해당 항목의 데이터 시리즈에 대한 보이기 / 숨기기를 할 수 있습니다. 이 기능을 적용하기 위해서는 <Legend> 노드의 useVisibleCheck 속성을 “true” 로 설정해야 합니다. 다음은 차트가 처음 생성되는 시점에서는 두 개의 데이터 시리즈가 감추어진 상태이고, 이후 사용자가 범례 항목을 클릭하여 보이기를 할 수 있도록 설정된 차트의 예제입니다. 차트가 처음 생성되는 시점에 특정 데이터 시리즈에 대한 숨기기를 하기 위해서는 데이터 시리즈의 visible 속성을 “false” 로 설정해야 합니다.

<Options>
  <Legend useVisibleCheck="true" markerWidth="12" markerHeight="12"/>
</Options>
...
<series>
  <Column2DSeries labelPosition="none" yField="goods" visible="false" displayName="goods"/>
  <Column2DSeries labelPosition="none" yField="income" visible="false" displayName="income"/>
  <Column2DSeries labelPosition="none" yField="service" displayName="service"/>
</series>

See the CodePen 알메이트 차트 - 범례 항목 보이기 / 숨기기

범례 스크롤바

범례의 항목이 많아서 주어진 공간에 모두 표시하지 못할 경우에는 스크롤바를 이용할 수 있습니다. 범례에 스크롤바를 표시하기 위해서는 해당 속성값을(verticalScrollPolicy, horizontalScrollPolicy) “on” 으로 지정해야 합니다. 다음은 수직 스크롤바를 범례에 표시한 예제입니다.

<Options>
  <Legend position="right" useVisibleCheck="true" direction="horizontal" labelPlacement="right" markerWidth="12" markerHeight="12" width="90" height="130" verticalScrollPolicy="on"/>
</Options>

See the CodePen 알메이트 차트 - 범례 스크롤바

범례 항목 툴팁

사용자가 마우스를 범례 항목에 올려두었을 때 해당 항목의 툴팁을 표시할 수 있습니다. 이 기능은 <Legend> 노드의 titleJsFunction 속성에 실행될 자바스크립트 함수명을 지정하고 해당 함수를 구현함으로써 가능합니다. 다음은 이에 대한 예제입니다.

<Options>
  <Legend useVisibleCheck="true" position="bottom" horizontalScrollPolicy="off" titleJsFunction="legendTitleFunc"/>
</Options>
...
function legendTitleFunc(index, value) {
  return value + "입니다.";
}

See the CodePen 알메이트 차트 - 범례 항목 툴팁 표시

사용자 정의 범례

<Legend> 노드를 이용하지 않고 <SubLegend> 노드를 <Box> 노드의 자식으로 정의하여 범례를 생성할 수 있습니다. 이 방법은 <Legend> 노드를 이용하여 범례를 만드는 것보다 차트 개발자에게 더 유연한 개발 환경을 제공합니다. 다음은 <SubLegend> 노드와 <CheckableLegendItem> 노드를 이용하며 범례를 만드는 예제입니다.

<Box horizontalAlign="center" width="100%">
  <SubLegend useVisibleCheck="true" direction="horizontal" markerHeight="15" markerWidth="15">
    <CheckableLegendItem targetSeries="{series1}" fill="#40b2e6" label="Profit"/>
    <CheckableLegendItem targetSeries="{series2}" fill="#4453a8" label="Cost"/>
    <CheckableLegendItem targetSeries="{series3}" fill="#fabc05" label="Revenue"/>
  </SubLegend>
</Box>

See the CodePen 알메이트 차트 - 사용자 정의 범례 (Sub-legend)

주의: 위 예제에서는 <Legend> 노드의 useVisibleCheck 속성을 설정한 (useVisibleCheck=”true”) 것과 동일한 기능을 제공하는 <CheckableLegendItem> 노드를 이용하였습니다. 범례 항목 클릭시 데이터 시리즈에 대한 보이기 / 숨기기 기능을 사용자 정의 범례(Sub-legend)에 적용하기 위해서는 <LegendItem> 노드가 아닌 <CheckableLegendItem> 노드를 이용해야 합니다.

범례 항목 클릭시 시리즈 강조

범례 항목을 클랙했을 때 기본적인 차트의 동작은 클릭한 항목의 시리즈를 보이기/감추기 하는 것입니다. itemClickEmphasizeType (기본값 : ”appearance”) 속성값을 ”focus” 로 설정하면 클릭한 항목에 대한 시리즈를 보이기/감추기 하지않고 해당 시리즈를 강조하여 표현하도록 할 수 있습니다. 다음은 <Legend> 노드의 itemClickEmphasizeType 속성값을 ”focus” 설정한 스택 컬럼 차트의 예제입니다.

<Options>
  ...
  <Legend useVisibleCheck="true" markerWidth="12" markerHeight="12" itemClickEmphasizeType="focus"/>
</Options>

See the CodePen 알메이트 차트 - 범례 항목 클릭시 시리즈 강조

목차