new CrossRangeZoomer()
CrossRangeZoomer 클래스는 차트상에 마우스 이동에 따른 십자선을 표시하고 특정 영역에 대한 선택과 확대(zoom) 기능을 지원합니다.
레이아웃은 다음과 같은 형식으로 작성됩니다.
<rMateChart backgroundColor="0xFFFFFF" borderStyle="solid" borderRadius="12">
...
<Line2DChart showDataTips="true" selectionMode="single">
...
<annotationElements>
<CrossRangeZoomer enableZooming="false" horizontalLabelFormatter="{numFmt}" />
</annotationElements>
</Line2DChart>
</rMateChart>
Members
-
backgroundColorHexadecimal
-
십자선 라벨의 배경색을 설정합니다.
- Default Value:
- #999999
-
borderColorHexadecimal
-
십자선 라벨의 테두리 선 색상을 설정합니다.
- Default Value:
- #999999
-
borderStyleString
-
십자선 라벨의 테두리 선 스타일을 설정합니다.
유효값은 solid, none 입니다.
- Default Value:
- solid
-
borderWidthNumber
-
십자선 라벨의 테두리 선 굵기를 설정합니다.
- Default Value:
- 1
-
enableCrossHairBoolean
-
마우스 포인터에 십자선을 표시할 지 여부를 설정합니다.
- Default Value:
- true
-
enableZoomingBoolean
-
차트의 확대(zoom) 기능 사용 여부를 설정합니다.
- Default Value:
- true
-
horizontalAxisOppEnableBoolean
-
Bar2DWingChart 클래스에서 wingPlacement 속성값이 left 에 해당하는 영역에 CrossRangeZoomer 클래스 인스턴스가 적용될 경우 true 값으로 설정합니다.
- Default Value:
- false
-
horizontalLabelFormatterObject
-
십자 마크의 가로선에 표시되는 좌표값을 표현하기 위한 포맷터를 설정합니다.
- Default Value:
- NumberFormatter
-
horizontalLabelOppFormatterObject
-
십자 마크의 가로선 반대쪽에 표시되는 좌표값을 표현하기 위한 포맷터를 설정합니다.
useDualCrossXLabel 속성값이 true 인 경우만 적용됩니다.- Default Value:
- NumberFormatter
-
horizontalLabelPlacementString
-
십자 마크의 가로선 라벨의 위치를 설정합니다.
값이 left 이면 차트의 왼쪽에, 값이 right 이면 차트의 오른쪽에 좌표값이 표시됩니다.유효값은 left, right 입니다.
- Default Value:
- left
-
horizontalStrokeObject
-
십자 마크의 가로선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#cccccc")
-
horizontalStrokeEnableBoolean
-
십자 마크의 가로선을 출력할 지 여부를 설정합니다.
- Default Value:
- true
-
minimumVisibleItemSizeNumber
-
카테고리 축(CategoryAxis)에서 확대(zoom)가 일어날 경우 확대되는 범위에 표시되는 라벨의 최소 개수를 설정합니다.
설정 값이 0 이면 이 속성은 무시됩니다.- Default Value:
- 5
-
resetModeString
-
확대(zoom) 기능 실행 후 복원(Restore) 방식을 설정합니다.
값을 initial 으로 설정하면 사용자에 의해 최초에 설정된 minimum, maximum 속성값을 유지하고, 값을 auto 으로 설정하면 차트에 의해 minimum, maximum 속성값이 설정됩니다.유효값은 initial, auto 입니다.
- Default Value:
- auto
-
showValueLabelsBoolean
-
현재 마우스가 위치한 좌표값을 표시할 지 여부를 설정합니다.
- Default Value:
- true
-
syncCrossRangeZoomerObject
-
DualChart 클래스의 주 차트(mainChart) 와 보조 차트(subChart) 는 각자의 CrossRangeZoomer 클래스 인스턴스가 설정되는데, 주 차트(mainChart)의 십자선을 보조 차트(subChart)에도 표시할 필요가 있을 경우, 보조 차트(subChart)의 이 속성에 메인 차트(mainChart)에 정의된 CrossRangeZoomer 인스턴스의 id 속성값을 설정합니다.
레이아웃은 다음과 같은 형식으로 작성됩니다.
<DualChart> <mainChart> ... <CrossRangeZoomer id="candleCRZ" enableZooming="false" zoomType="both" horizontalLabelFormatter="{nft}" /> </mainChart> <subChart> ... <CrossRangeZoomer id="columnCRZ" syncCrossRangeZoomer="{candleCRZ}" zoomType="both" verticalLabelPlacement="top" horizontalLabelFormatter="{nft}" /> </subChart> </DualChart>
- Default Value:
- null
-
useDualCrossXLabelBoolean
-
수직축을 2개 이상 설정한 경우 두 축에 대하여 십자선 라벨(CrossHairLabel)을 표시할 지 여부를 설정합니다.
useDualCrossYLabel 속성값이 true 인 경우, 수직축의 십자선 라벨(CrossHairLabel)이 표시됩니다.
horizontalLabelPlacement 속성은 무시됩니다.
수직축 3개가 설정되었다면 먼저 설정된 2개의 축에 대한 십자선 라벨(CrossHairLabel)이 표시됩니다.- Default Value:
- false
-
useDualCrossYLabelBoolean
-
수평축을 2개 이상 설정한 경우 두 축에 대하여 십자선 라벨(CrossHairLabel)을 표시할 지 여부를 설정합니다.
useDualCrossYLabel 속성값이 true 인 경우, 수평축의 십자선 라벨(CrossHairLabel)이 표시됩니다.
verticalLabelPlacement 속성은 무시됩니다.
수평축 3개가 설정되었다면 먼저 설정된 2개의 축에 대한 십자선 라벨(CrossHairLabel)이 표시됩니다.- Default Value:
- false
-
verticalAxisOppEnableBoolean
-
Column2DWingChart 클래스에서 wingPlacement 속성값이 bottom 에 해당하는 영역에 CrossRangeZoomer 클래스 인스턴스가 적용될 경우 true 값으로 설정합니다.
- Default Value:
- false
-
verticalLabelFormatterObject
-
십자 마크의 세로선에 표시되는 좌표값을 표현하기 위한 포맷터를 설정합니다.
- Default Value:
- NumberFormatter
-
verticalLabelOppFormatterObject
-
십자 마크의 세로선 반대쪽에 표시되는 좌표값을 표현하기 위한 포맷터를 설정합니다.
useDualCrossXLabel 속성값이 true 인 경우만 적용됩니다.- Default Value:
- NumberFormatter
-
verticalLabelPlacementString
-
십자 마크의 세로선 라벨의 위치를 설정합니다.
값이 bottom 이면 차트의 아래쪽에, 값이 top 이면 차트의 위쪽에 좌표값이 표시됩니다.유효값은 bottom, top 입니다.
- Default Value:
- bottom
-
verticalStrokeObject
-
십자 마크의 세로선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#cccccc")
-
verticalStrokeEnableBoolean
-
십자 마크의 세로선을 출력할 지 여부를 설정합니다.
- Default Value:
- true
-
zoomRangeFillObject
-
확대(zoom) 영역의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#777777", 0.5)
-
zoomRangeStrokeObject
-
확대(zoom) 영역의 선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#b8b9ed")
-
zoomTypeString
-
차트의 확대(zoom) 기능 사용시 확대 기능을 수직축과 수평축 모두에 적용할 지 여부를 설정합니다.
예를 들어, zoomType 속성을 horizontal 으로 설정하고 확대(zoom in)를 수행하면 수직축에 대한 확대는 적용되지 않고 수평축에 대한 확대만 적용됩니다.유효값은 horizontal, vertical, both 입니다.
- Default Value:
- horizontal
Methods
-
rangeUpdateJsFunction(type, x, y)
-
마우스 이벤트가 발생될 경우 실행될 자바스크립트 함수명을 설정합니다.
`
...
rangeUpdateJsFunc(type, x, y) {
...
}Name Type Description type
Event 마우스 이벤트의 타입명
x
Number 십자선의 X 위치 비율값
y
Number 십자선의 Y 위치 비율값