데이터 시리즈
차트의 레이아웃을 구성하는 여러가지 요소들 중에서 데이터 시리즈는 가장 중요한 요소입니다.
적용되는 데이터셋과의 연결과 데이터 포인트들이 차트 상에 표현되는 다양한 방식은 데이터 시리즈의 설정을 통해서 이루어집니다.
알메이트 차트의 레이아웃에서 데이터 시리즈는 <“차트의 종류명” + “Series”> 로 표시되고, 차트 노드(<“차트의 종류명” + “Chart”>)의 series 속성에 정의됩니다.
예들 들면, 레이아웃에서 영역 차트의 데이터 시리즈는 <Area2DSeries> 로 표시되고 차트 노드는 <Area2DChart> 로 표시됩니다.
다음은 처음 차트 만들기에서 예제에 적용된 컬럼 차트 생성을 위한 데이터 시리즈 설정 부분입니다.
<Column2DChart showDataTips="true">
...
<series>
<Column2DSeries labelPosition="outside" yField="2011" displayName="2011"/>
</series>
</Column2DChart>
데이터 필드 설정
차트에 데이터 값을 표현하기 위해서는 데이터셋의 특정 데이터 필드를 데이터 시리즈의 특정한 속성값에 지정해야 합니다.
지정할 속성은 차트의 유형에 따라서 달라지는데, 데이터 값의 크기가 세로 축(Y 축) 상에 표현된다면 yField(예, 컬럼 차트, 영역 차트 등) 속성에,
가로 축(X 축) 상에 표현된다면 xField(예, 바 차트) 속성에 그리고 기타 차트 유형에 따라서(예, 파이 차트: field, 피라미드 차트: weightField) 정해진 속성에 지정해야만 합니다.
위 컬럼 차트 예제에서는 yField 속성에 데이터 필드명 “2011” 이 지정되었습니다.
다중 데이터 시리즈 설정
차트에 표현될 데이터 시리즈가 여러 개일 경우에는 표현하기 원하는 개수만큼의 데이터 시리즈 노드를 정의하면 됩니다.
다음 코드 예제는 컬럼 차트에서 3 개의 데이터 시리즈를 표현하기 위한 레이아웃과 데이터셋을 나타낸 것입니다.
위에 설명된 예제에서 “2012”, “2013” 데이터 필드가 추가되어 추가된 2 개의 데이터 시리즈에 지정되었습니다.
<Column2DChart showDataTips="true">
...
<series>
<Column2DSeries labelPosition="outside" yField="2011" displayName="2011"/>
<Column2DSeries labelPosition="outside" yField="2012" displayName="2012"/>
<Column2DSeries labelPosition="outside" yField="2013" displayName="2013"/>
</series>
</Column2DChart>
var chartData =
[{"Month":"Jan", "2011":2.4, "2012":3.1, "2013":2.5},
{"Month":"Feb", "2011":3.8, "2012":4.6, "2013":1.3},
{"Month":"Mar", "2011":8.1, "2012":9, "2013":6.5},
{"Month":"Apr", "2011":5.1, "2012":4, "2013":7.7},
{"Month":"May", "2011":2.1, "2012":3.9, "2013":1.9},
{"Month":"Jun", "2011":5.2, "2012":4.9, "2013":1.9},
{"Month":"Jul", "2011":4.2, "2012":3.2, "2013":1.9}]
차트의 유형 중 콤비네이션 차트에서는 두 가지 이상의 서로 다른 종류의 데이터 시리즈가 차트 노드의 series 속성에 정의됩니다.
콤비네이션 차트에서 특정 데이터 시리즈를 다중 데이터 시리즈로 표현하고자 할 경우에는 차트 노드의 <series> 속성에 해당 데이터 시리즈들를 바로 설정하지 않고 반드시 <“차트의 종류명” + “Set”>(예, <Column2DSet>) 노드를 정의 하고 정의된 노드의 <series> 속성에 데이터 시리즈들을 정의해야 합니다.
다음은 1 개의 영역 시리즈, 2 개의 컬럼 시리즈, 1 개의 라인 시리즈를 정의한 레이아웃과 이를 적용해서 출력한 차트의 예제입니다.
2 개의 컬럼 시리즈를 표현하기 위해서 <Column2DSet> 노드가 정의되었고 이 노드의 <series> 속성에 <Column2DSeries> 노드 2개가 설정되었습니다.
<series>
<Area2DSeries yField="Profit" form="curve" displayName="Profit">
...
</Area2DSeries>
<Column2DSet type="clustered">
<series>
<Column2DSeries yField="Cost" displayName="Cost">
...
</Column2DSeries>
<Column2DSeries yField="Revenue" displayName="Revenue">
...
</Column2DSeries>
</series>
</Column2DSet>
<Line2DSeries yField="Revenue" radius="4.5" itemRenderer="CircleItemRenderer" displayName="Revenue">
...
<verticalAxis>
<LinearAxis id="vAxis2" interval="400" formatter="{numFmt}"/>
</verticalAxis>
...
</Line2DSeries>
</series>
See the CodePen 알메이트 차트 - 다중 데이터 시리즈 설정
데이터 시리즈와 차트 유형
다음은 알메이트 차트에서 사용 가능한 데이터 시리즈에 대한 리스트입니다.
데이터 시리즈가 적용되는 차트 유형과 데이터셋의 필드명을 지정해야 하는 속성도 함께 표시되었습니다.
| 데이터 시리즈 |
차트 유형 |
데이터 필드 설정 속성 |
<Area2DSeries>
(<Area2DSet>)
|
<Area2DChart>
|
yField
|
<Bar2DSeries>
(<Bar2DSet>)
|
<Bar2DChart>
|
xField
|
<Bar2DWingSeries>
|
<Bar2DWingChart>
|
xField, xFieldOpp
|
<Bar3DSeries>
(<Bar3DSet>)
|
<Bar3DChart>
|
xField
|
<BoxPlotSeries>
|
<BoxPlotChart>
|
yField
|
<Bubble2DSeries>
|
<Bubble2DChart>
|
xField, yField, radiusField
|
<Bubble3DSeries>
|
<Bubble3DChart>
|
xField, yField, radiusField
|
<CandleArea2DSeries>
|
<CandleArea2DChart>
|
yField
|
<CandleLine2DSeries>
|
<CandleLine2DChart>
|
yField
|
<Candlestick2DSeries>
|
<Candlestick2DChart>
|
openField, closeField, highField, lowField
|
<Column2DSeries>
(<Column2DSet>)
|
<Column2DChart>
|
yField
|
<Column2DWingSeries>
|
<Column2DWingChart>
|
yField, yFieldOpp
|
<Column3DSeries>
(<Column3DSet>)
|
<Column3DChart>
|
yField
|
<Equalizer2DSeries>
|
<Equalizer2DChart>
|
yField
|
<Histogram2DSeries>
|
<Histogram2DChart>
|
yField
|
<Histogram3DSeries>
|
<Histogram3DChart>
|
yField
|
<HTarget2DGoalSeries>
|
<Combination2DChart>
|
xField
|
<HTarget2DResultSeries>
|
<Combination2DChart>
|
xField
|
<HTarget3DGoalSeries>
|
<Combination3DChart>
|
xField
|
<HTarget3DResultSeries>
|
<Combination3DChart>
|
xField
|
<ImageMatrixSeries>
(<ImageMatrixSet>)
|
<ImageMatrixChart>
|
field
|
<ImageSeries>
|
<ImageChart>
|
yField
|
<Line2DSeries>
|
<Line2DChart>
|
yField
|
<Matrix2DSeries>
|
<Matrix2DChart>
|
xField, yField, zField
|
<MotionBubbleSeries>
|
<MotionChart>
|
yField, radiusField
|
<MotionColumnSeries>
|
<MotionChart>
|
yField
|
<MotionLineSeries>
|
<MotionChart>
|
yField
|
<OverlayBubbleSeries>
|
<OverlayBubbleChart>
|
field, nameField
|
<Pie2DSeries>
|
<Pie2DChart>
|
field, nameField
|
<Pie3DSeries>
|
<Pie3DChart>
|
field, nameField
|
<Pyramid2DSeries>
|
<Pyramid2DChart>
|
nameField, weightField
|
<RadarSeries>
|
<RadarChart>
|
field
|
<TreeMapSeries>
|
<TreeMapChart>
|
nameField, groupField, groupNameField, weightField
|
<Vector2DSeries>
|
<Vector2DChart>
|
xField , degreeField, meterField, velocityField
|
<VTarget2DGoalSeries>
|
<Combination2DChart>
|
yField
|
<VTarget2DResultSeries>
|
<Combination2DChart>
|
yField
|
<VTarget3DGoalSeries>
|
<Combination3DChart>
|
yField
|
<VTarget3DResultSeries>
|
<Combination3DChart>
|
yField
|
<WindRoseSeries>
(<WindRoseSet>)
|
<WindRoseChart>
|
field
|
<WordCloudSeries>
|
<WordCloudChart>
|
textField, weightField
|