rMateChart v7.0

new HistoryRangeSelector()

HistoryRangeSelector 클래스는 히스토리 차트의 셀렉터를 표현합니다.

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

<rMateChart backgroundColor="0xFFFFFF" borderRadius="12" borderStyle="solid">
  <HistoryChart>
    <displayerChart>
      ...
    </displayerChart>
    <navigator>
      ...
    </navigator>
    <selector>
      <HistoryRangeSelector width="100%" startingRange="center" visibleItemSize="30" />
    </selector>
  </HistoryChart>
</rMateChart>

Members

dataTipBackgroundColorOnSeriesBoolean

데이터 팁의 배경색을 시리즈의 기본 색상으로 설정할 지 여부를 설정합니다.

Default Value:

false

dataTipBorderColorHexadecimal

데이터 팁 테두리 선의 색상을 설정합니다.

Default Value:

null

dataTipBorderStyleString

데이터 팁이 표시되는 div 의 테두리 스타일을 설정합니다.

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

none - 테두리 선을 그리지 않도록 설정합니다.

solid - 테두리를 기준으로 테두리 자체에 선을 그리도록 설정합니다.

inset - 테두리를 기준으로 테두리 안쪽에 선을 그리도록 설정합니다.

outset - 테두리를 기준으로 테두리 바깥쪽에 선을 그리도록 설정합니다.

Default Value:

solid

dataTipBorderWidthNumber

데이터 팁 테두리 선의 굵기를 설정합니다.

Default Value:

dataTipDisplayModeString

데이터 팁의 출력형태를 설정합니다.

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

none - 차트상의 데이터 포인트에 마우스 오버 시 데이터 포인트 위치에 데이터 팁이 표시됩니다.

mouse - 차트상의 데이터 포인트에 마우스 오버 시 데이터 팁이 마우스를 따라 움직입니다.

axis - 동일한 X 좌표(바 차트는 Y 좌표) 선상에 있는 데이터 포인트들의 위치에 데이터 팁이 표시됩니다.

Default Value:

none

dataTipFormatterObject

데이터 팁에 적용되는 포맷터를 설정합니다.

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

NumberFormatter

CurrencyFormatter

DateFormatter

Default Value:

NumberFormatter

dataTipModeString

showDataTips 값이 true 인 경우, 데이터 팁의 표현 방식을 설정합니다.

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

single - 마우스 오버 시 해당 지점에서 가장 가까운 데이터 포인트의 데이터 팁 하나가 표시됩니다.

multiple - 마우스 오버 시 해당 지점에서 가까운 다수의 데이터 팁이 표시됩니다.

Default Value:

multiple

dataTipStyleNameString

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

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

Default Value:

null

enablePatternBoolean

시각 장애 사용자를 위한 패턴 적용 여부를 설정합니다.

차트를 생성하는 HTML 내에 차트 설정 변수, chartVars 값이 "&usePattern=true" 으로 설정되고, 이 속성값이 true 일 경우 차트에 패턴이 적용됩니다.

Default Value:

false

liveDraggingBoolean

셀렉터의 반응을 차트에 즉각적으로 적용할 지 여부(live dragging)를 설정합니다.

Default Value:

true

mouseSensitivityNumber

데이터 팁 출력 시 출력되는 데이터 포인트들의 마우스 반경을 설정합니다.

설정한 값이 클수록 더 많은 데이터 팁(더 큰 마우스 반경에 포함되는 데이터 포인트들)이 출력됩니다.

Default Value:

paddingBottomNumber

하단 여백의 크기를 픽셀 단위로 설정합니다.

Default Value:

paddingLeftNumber

왼쪽 여백의 크기를 픽셀 단위로 설정합니다.

Default Value:

paddingRightNumber

오른쪽 여백의 크기를 픽셀 단위로 설정합니다.

Default Value:

paddingTopNumber

상단 여백의 크기를 픽셀 단위로 설정합니다.

Default Value:

selectionModeString

차트상의 데이터 포인트에 마우스 오버 혹은 클릭 시 해당 아이템의 강조 표시 방식을 설정합니다.

유효값은 none, single, multiple 입니다.

Default Value:

single

seriesObject

차트상에 표시되는 데이터의 시리즈를 설정합니다.

유효값은 Column2DSeries, Area2DSet, Column3DSet, Bar3DSeries 등 입니다.

Default Value:

null

showDataTipMarkerBoolean

데이터 팁 내에 각 시리즈의 색상과 같은 색상의 마커의 표시 여부를 설정합니다.

Default Value:

false

showDataTipsBoolean

차트상의 데이터 포인트에 마우스 오버 시 데이터 팁의 출력 여부를 설정합니다.

Default Value:

false

showDataTipTargetsBoolean

차트상에 데이터 팁이 표시될 때 마우스 오버된 데이터 포인트에 원을 표시할 지 여부를 설정합니다.

Default Value:

false

startingRangeString

차트가 처음 생성되었을 때 선택 영역을 설정합니다.

유효값은 left, center, right 입니다.

Default Value:

center

touchMoveEnableBoolean

모바일 기기에서 손가락으로 차트 영역을 이동할 경우, touchMove 이벤트를 브라우저에 넘길지 여부를 설정합니다.

touchMove 이벤트를 브라우저에 넘기면 차트 영역에서 touchMove 이벤트 발생 시 브라우저 스크롤이 일어나며, touchMove 이벤트를 브라우저에 넘기지 않으면 차트 영역 내에서 브라우저 스크롤이 일어나지 않습니다.

차트를 touchMove 할 때 브라우저 스크롤이 발생하면, tooltips 을 확인하기 어려운 문제가 있으므로, 이를 사용자가 선택할 수 있도록 하기 위한 속성입니다.

Default Value:

true

visibleItemSizeNumber

차트가 처음 생성되었을 때 선택 영역에 보여지는 데이터 아이템의 개수를 설정합니다.

이 값은 총 데이터의 퍼센티지 입니다.

예를 들어, 총 데이터가 100 개이고 visibleItemSize 값을 10으로 설정한 경우, 차트가 처음 생성되었을 때 100 개의 10 퍼센트에 해당되는 약 10 개의 데이터가 표시됩니다.

Default Value:

Methods

dataTipJsFunction(seriesId, seriesName, index, xName, yName, data, values)

차트상의 데이터 포인트에 마우스 오버 시 표시되는 데이터 팁의 내용을 작성하는 자바스크립트 함수명을 설정합니다.

차트 레이아웃 설정시 dataTipJsFunction 속성값을 자바스크립트 함수명으로 설정합니다.

<...Chart showDataTips="true" dataTipJsFunction="myDataTip" ...>
...
myDataTip(seriesId, seriesName, index, xName, yName, 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)가 있을 경우 해당 식별자를 나타냅니다.
`seriesName`	String	시리즈의 displayName 속성값으로 설정한 시리즈 이름을 나타냅니다.
`index`	Number	해당 시리즈의 인덱스 값입니다.
`xName`	String	X축에 displayName 을 정의하였다면 X축의 displayName 을 나타냅니다.
`yName`	String	Y축에 displayName 을 정의하였다면 Y축의 displayName 을 나타냅니다.
`data`	Object	데이터 아이템의 데이터 객체입니다.
`values`	Array	해당 아이템의 값입니다. 배열로 전달됩니다.

displayCompleteCallFunction(id)

차트의 생성이 완료되었을 때 실행될 자바스크립트 함수명을 설정합니다.

파라메터로는 차트에 설정된 식별자(Identifier)가 넘어갑니다.

<...Chart displayCompleteCallFunction="displayCompleteFunc" ...>
...
displayCompleteFunc(id) {
  ...
}

Name	Type	Description
`id`	String	displayCompleteCallFunction 을 실행한 차트의 식별자(Identifier) 입니다.

itemClickJsFunction(seriesId, displayText, index, data, values)

<...Chart showDataTips="true" itemClickJsFunction="chartClick" ...>
...
chartClick(seriesId, displayText, 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)가 있을 경우 해당 식별자를 나타냅니다.
`displayText`	String	차트에 표시되는 데이터 팁의 내용입니다.
`index`	Number	클릭된 데이터 아이템(막대, 파이 조각 등)의 인덱스 번호입니다. 가장 왼쪽 또는 가장 위쪽의 인덱스 번호는 0 입니다.
`data`	Object	데이터 아이템의 데이터 객체입니다.
`values`	Array	해당 아이템의 값입니다. 배열로 전달됩니다.

Class: HistoryRangeSelector

new HistoryRangeSelector()

Members

dataTipBackgroundColorOnSeriesBoolean

dataTipBorderColorHexadecimal

dataTipBorderStyleString

dataTipBorderWidthNumber

dataTipDisplayModeString

dataTipFormatterObject

dataTipModeString

dataTipStyleNameString

enablePatternBoolean

liveDraggingBoolean

mouseSensitivityNumber

paddingBottomNumber

paddingLeftNumber

paddingRightNumber

paddingTopNumber

selectionModeString

seriesObject

showDataTipMarkerBoolean

showDataTipsBoolean

showDataTipTargetsBoolean

startingRangeString

touchMoveEnableBoolean

visibleItemSizeNumber

Methods

dataTipJsFunction(seriesId, seriesName, index, xName, yName, data, values)

displayCompleteCallFunction(id)

itemClickJsFunction(seriesId, displayText, index, data, values)