Class: Area2DSet

Area2DSet

new Area2DSet()

Area2DSet 클래스는 다중의 Area2DSeries 클래스 인스턴스를 하나의 대표 시리즈로 표현합니다.

Area2DSet 으로 대표되는 복수의 Area2DSeries 는 마치 하나의 시리즈와 같이 작동됩니다.

레이아웃은 다음과 같은 형식으로 작성됩니다.

<Combination2DChart showDataTips="true">
  <horizontalAxis>
    <CategoryAxis categoryField="Month" />
  </horizontalAxis>
  <series>
    <Area2DSet type="stacked">
      <series>
        <Area2DSeries yField="Cost" displayName="Cost" />
        <Area2DSeries yField="Revenue" displayName="Revenue" />
      </series>
    </Area2DSet>
    <Line2DSeries  yField="Revenue" displayName="Revenue" />
  </series>
</Combination2DChart>

Extends

Members

displayNameString

시리즈의 이름을 설정합니다.

설정된 값은 기본적으로 데이터 팁(툴팁)에서 보여지게 되고 범례의 항목으로 표시됩니다.

Default Value:
  • null

formatterString

스택의 합계를 원하는 숫자(통화, 날짜) 형식으로 표현하기 위한 포맷터(NumberFormatter, CurrencyFormatter, DateFormatter)를 설정합니다.

Default Value:
  • null

idString

식별자(Identifier)를 설정합니다.

식별자(Identifier)는 사용자에 의해 정의된 임의의 고유값입니다.

설정된 식별자(Identifier)를 통해 해당 객체에 접근이 가능합니다.

Default Value:
  • null

interactiveBoolean

시리즈에 마우스 오버시 데이터 팁을 보여줄 지 여부를 설정합니다.

Default Value:
  • true

itemRollOverColorHexadecimal

데이터 아이템에 마우스 오버했을 때의 색상을 설정합니다.

Default Value:
  • null

itemRollOverEmphasizeBoolean

데이터 아이템에 마우스 오버했을 때의 아이템을 강조합니다.

Default Value:
  • false

itemSelectionColorHexadecimal

데이터 아이템을 선택했을 떄의 색상을 설정합니다.

Default Value:
  • null

labelBackgroundColorString

라벨 배경의 색상을 설정합니다.

Default Value:
  • transparent

labelBorderRadiusNumber

라벨 테두리의 둥근 정도를 설정합니다.

Default Value:
  • 0

labelBoxHeightOffsetNumber

라벨 배경의 추가 높이값을 설정합니다.

Default Value:
  • 0

labelBoxWidthOffsetNumber

라벨 배경의 추가 너비값을 설정합니다.

Default Value:
  • 0

labelXOffsetNumber

합계 라벨의 가로위치(X축 값)에 대한 오프셋(Offset) 값을 설정합니다. (픽셀 단위)

Default Value:
  • 0

labelYOffsetNumber

합계 라벨의 세로위치(Y축 값)에 대한 오프셋(Offset) 값을 설정합니다. (픽셀 단위)

Default Value:
  • 0

selectableBoolean

마우스로 데이터를 선택 가능하도록 할 지 여부를 설정합니다.

Default Value:
  • true

showTotalLabelBoolean

type 속성값이 stacked 인 경우, 스택의 합계를 표시할 지 여부를 설정합니다.

Default Value:
  • false

styleNameString

스타일을 <Style> 노드에 설정할 경우, <Style> 노드에 정의된 이름을 설정합니다.

<Style> 노드에 스타일을 정의할 때는 반드시 스타일명 앞에 마침표가 위치해야 합니다.

레이아웃은 다음과 같은 형식으로 작성됩니다.

<Bar3DChart>
  <Bar3DSeries xField="Profit" styleName="seriesStyle">
  ...
</Bar3DChart>
<Style>
  .seriesStyle {fontFamily:"Malgun Gothic";labelPosition:inside;fontSize:11;paddingTop:4;color:0x000099;}
</Style>
Default Value:
  • null

totalLabelFieldString

스택의 합계 라벨로 표시될 데이터 필드명을 설정합니다.

totalLabelJsFunction 속성이 설정되어 자바스크립트에 의한 사용자 정의 라벨이 표시될 경우 이 속성은 무시됩니다.

Default Value:
  • null

typeString

Area2DSet 클래스 인스턴스에 다중 Area2DSeries 클래스 인스턴스(시리즈)가 설정된 경우, 시리즈의 표현 방식을 설정합니다.

유효값은 다음과 같습니다.


  • clustered - 각 시리즈를 나열하듯이 표현합니다. 기본 방식(default)입니다.

  • overlaid - 각 시리즈의 영역(Area)이 카테고리 마다 거듭 표시되어, 마지막에 표시되는 시리즈의 영역이 전면(foreground)에 나타납니다.

  • stacked - 각 시리즈의 영역(Area)이 표시되는 순서에 따라서 쌓이는 방식으로 표현됩니다.

  • 100% - 각 시리즈의 영역(Area)이 100% 대비 비율에 계산되어 쌓이는 방식으로 표현됩니다.

Default Value:
  • overlaid

visibleBoolean

시리즈를 차트에 출력할 지 여부를 설정합니다.

Default Value:
  • true

Methods

inherited fillJsFunction(seriesId, index, data, values)

사용자 정의 색상을 설정하는 자바스크립트 함수명을 설정합니다.

차트 레이아웃 설정시 Series 클래스 인스턴스의 fillJsFunction 속성값에 자바스크립트 함수명을 설정합니다.

<Column2DSeries yField="Profit" fillJsFunction="fillJsFunc">
...
fillJsFunc(seriesId, index, data, values) {
  ...
}

values 값은 배열로 전달되며 차트의 종류에 따라 다음과 같습니다.
1.  바 시리즈(Bar2DSeries, Bar3DSeries) - 0 : x축 값, 1 : y축 값
2.  컬럼 시리즈(Column2DSeries, Column3DSeries) - 0 : x축 값, 1 : y축 값
3.  영역 시리즈(Area2DSeries, CandleArea2DSeries) - 0 : x축 값, 1 : y축 값
4.  버블 시리즈(Bubble2DSeries, Bubble3DSeries) - 0 : x축 값, 1 : y축 값, 2 : radius 값
5.  라인 시리즈(Line2DSeries, CandleLine2DSeries) - 0 : x축 값, 1 : y축 값
6.  파이 시리즈(Pie2DSeries, Pie3DSeries) - 0 : 값, 1 : 퍼센티지, 2 : nameField 값
7.  캔들 시리즈(Candlestick2DSeries) - 0 : x축 값, 1 : openField 값, 2 : closeField 값, 3 : highField 값, 4 : lowField 값
8.  윙 시리즈(Column2DWingSeries, Bar2DWingSeries) - 0 : x축 값, 1 : y축 값, 2 : xOpp 값, 3 : yOpp 값
9.  히스토그램 시리즈(Histogram2D, Histogram3DSeries) - 0 : x축 값, 1 : y축 값
10. 트리맵 시리즈(TreeMapSeries) - 0 : weight 값, 1 : text 값
11. 박스플롯 시리즈(BoxPlotSeries) - 0 : upper 값, 1 : median 값, 2 : lower 값, 3 : min 값, 4 : hidden 값
12. 벡터 시리즈(Vector2DSeries) - 0 : degree 값, 1 : velocity 값, 2 : meter 값
13. 워드클라우드 시리즈(WordCloudSeries) - 0 : text 값, 1 : weight 값
14. 피라미드, 퓨넬 시리즈(Pyramid2DSeries) - 0 : weight 값, 1 : nameField 값
15. 오버레이버블 시리즈(OverlayBubbleSeries) - 0 : field 값, 1 : nameField 값
16. 이미지매트릭스 시리즈(ImageMatrixSeries) - 0 : value 값
17. 윈드로즈 시리즈(WindRoseSeries) - 0 : field 값
Name Type Description
seriesId String

시리즈 식별자(Identifier)

index Number

데이터 아이템의 인덱스

data Object

데이터 아이템의 데이터 객체

values Array

데이터 아이템의 데이터 배열

inherited htmlJsFunction(seriesId, index, data, values)

차트의 데이터 아이템들 중에서 설정된 조건을 만족하는 데이터 아이템에 대해서 실핼될 자바스크립트 함수명을 설정합니다.

차트 레이아웃 설정시 Series 클래스 인스턴스의 htmlJsFunction 속성값에 자바스크립트 함수명을 설정합니다.

<Column2DSeries yField="Profit" htmlJsFunction="userElementFunc">
...
userElementFunc(seriesId, index, data, values) {
  ...
}

values 값은 배열로 전달되며 차트의 종류에 따라 다음과 같습니다.
1.  바 시리즈(Bar2DSeries, Bar3DSeries) - 0 : x축 값, 1 : y축 값
2.  컬럼 시리즈(Column2DSeries, Column3DSeries) - 0 : x축 값, 1 : y축 값
3.  영역 시리즈(Area2DSeries, CandleArea2DSeries) - 0 : x축 값, 1 : y축 값
4.  버블 시리즈(Bubble2DSeries, Bubble3DSeries) - 0 : x축 값, 1 : y축 값, 2 : radius 값
5.  라인 시리즈(Line2DSeries, CandleLine2DSeries) - 0 : x축 값, 1 : y축 값
6.  파이 시리즈(Pie2DSeries, Pie3DSeries) - 0 : 값, 1 : 퍼센티지, 2 : nameField 값
7.  캔들 시리즈(Candlestick2DSeries) - 0 : x축 값, 1 : openField 값, 2 : closeField 값, 3 : highField 값, 4 : lowField 값
8.  윙 시리즈(Column2DWingSeries, Bar2DWingSeries) - 0 : x축 값, 1 : y축 값, 2 : xOpp 값, 3 : yOpp 값
9.  히스토그램 시리즈(Histogram2D, Histogram3DSeries) - 0 : x축 값, 1 : y축 값
10. 트리맵 시리즈(TreeMapSeries) - 0 : weight 값, 1 : text 값
11. 박스플롯 시리즈(BoxPlotSeries) - 0 : upper 값, 1 : median 값, 2 : lower 값, 3 : min 값, 4 : hidden 값
12. 벡터 시리즈(Vector2DSeries) - 0 : degree 값, 1 : velocity 값, 2 : meter 값
13. 워드클라우드 시리즈(WordCloudSeries) - 0 : text 값, 1 : weight 값
14. 피라미드, 퓨넬 시리즈(Pyramid2DSeries) - 0 : weight 값, 1 : nameField 값
15. 오버레이버블 시리즈(OverlayBubbleSeries) - 0 : field 값, 1 : nameField 값
16. 이미지매트릭스 시리즈(ImageMatrixSeries) - 0 : value 값
17. 윈드로즈 시리즈(WindRoseSeries) - 0 : field 값
Name Type Description
seriesId String

시리즈 식별자(Identifier)

index Number

데이터 아이템의 인덱스

data Object

데이터 아이템의 데이터 객체

values Array

데이터 아이템의 데이터 배열

inherited strokeJsFunction(seriesId, index, data, values)

아이템 렌더러에 의해 표현되는 아이템 테두리에 대한 사용자 정의 함수를 설정합니다.

차트 레이아웃 설정시 Series 클래스 인스턴스의 strokeJsFunction 속성값에 자바스크립트 함수명을 설정합니다.

<Column2DSeries yField="Profit" strokeJsFunction="strokeJsFunc">
...
strokeJsFunc(seriesId, index, data, values) {
  ...
}

values 값은 배열로 전달되며 차트의 종류에 따라 다음과 같습니다.
1.  바 시리즈(Bar2DSeries, Bar3DSeries) - 0 : x축 값, 1 : y축 값
2.  컬럼 시리즈(Column2DSeries, Column3DSeries) - 0 : x축 값, 1 : y축 값
3.  영역 시리즈(Area2DSeries, CandleArea2DSeries) - 0 : x축 값, 1 : y축 값
4.  버블 시리즈(Bubble2DSeries, Bubble3DSeries) - 0 : x축 값, 1 : y축 값, 2 : radius 값
5.  라인 시리즈(Line2DSeries, CandleLine2DSeries) - 0 : x축 값, 1 : y축 값
6.  파이 시리즈(Pie2DSeries, Pie3DSeries) - 0 : 값, 1 : 퍼센티지, 2 : nameField 값
7.  캔들 시리즈(Candlestick2DSeries) - 0 : x축 값, 1 : openField 값, 2 : closeField 값, 3 : highField 값, 4 : lowField 값
8.  윙 시리즈(Column2DWingSeries, Bar2DWingSeries) - 0 : x축 값, 1 : y축 값, 2 : xOpp 값, 3 : yOpp 값
9.  히스토그램 시리즈(Histogram2D, Histogram3DSeries) - 0 : x축 값, 1 : y축 값
10. 트리맵 시리즈(TreeMapSeries) - 0 : weight 값, 1 : text 값
11. 박스플롯 시리즈(BoxPlotSeries) - 0 : upper 값, 1 : median 값, 2 : lower 값, 3 : min 값, 4 : hidden 값
12. 벡터 시리즈(Vector2DSeries) - 0 : degree 값, 1 : velocity 값, 2 : meter 값
13. 워드클라우드 시리즈(WordCloudSeries) - 0 : text 값, 1 : weight 값
14. 피라미드, 퓨넬 시리즈(Pyramid2DSeries) - 0 : weight 값, 1 : nameField 값
15. 오버레이버블 시리즈(OverlayBubbleSeries) - 0 : field 값, 1 : nameField 값
16. 이미지매트릭스 시리즈(ImageMatrixSeries) - 0 : value 값
17. 윈드로즈 시리즈(WindRoseSeries) - 0 : field 값
Name Type Description
seriesId String

시리즈 식별자(Identifier)

index Number

데이터 아이템의 인덱스

data Object

데이터 아이템의 데이터 객체

values Array

데이터 아이템의 데이터 배열

totalLabelJsFunction(index, data, value)

스택의 합계 사용자 정의 라벨을 출력할 자바스크립트 함수명을 설정합니다.

<Area2DSet showTotalLabel="true" totalLabelJsFunction="totalLabelFunc">
...
totalLabelFunc(index, data, value) {
  ...
}
Name Type Description
index Number

데이터 아이템의 인덱스

data Object

데이터 아이템의 데이터 객체

value Array

합계값