Class: CrossRangeZoomer

CrossRangeZoomer

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 위치 비율값