new HalfCircularGauge()
HalfCircularGauge 클래스는 180 도에서 360 도까지 구간의 반원형 게이지를 표현합니다.
레이아웃은 다음과 같은 형식으로 작성됩니다.
<rMateChart backgroundColor="0xEEEEEE" borderRadius="12" borderStyle="solid">
<Options>
<Caption text="Gauge" />
</Options>
<NumberFormatter id="numFmt" precision="0" />
<HalfCircularGauge minimumAngle="185" maximumAngle="355" minimum="0" maximum="500" value="250" ...>
<frameStroke>
<Stroke color="0x232323" weight="6" />
</frameStroke>
<tickFill>
<SolidColor color="0xCCCCCC" />
</tickFill>
<minorTickFill>
<SolidColor color="0xFF9900" />
</minorTickFill>
</HalfCircularGauge>
</rMateChart>
Extends
Members
-
animationDurationNumber
-
이펙트(애니메이션 효과)가 지속되는 시간을 설정합니다.
- Default Value:
- 800
-
bottomRadiusNumber
-
반원형 게이지 밑단 중앙의 반지름을 픽셀 단위로 설정합니다.
- frameType 속성값이 rouding - 밑단 중앙의 반지름이 됩니다.
- frameType 속성값이 flat - bottomRadius 속성값 크기 만큼의 여백을 갖습니다.
- Default Value:
- 0
-
bounceAnimatingBoolean
-
이펙트(애니메이션 효과)가 표현될 때 바운스 효과를 보여줄 지 여부를 설정합니다.
- Default Value:
- true
-
editModeBoolean
-
게이지 값을 마우스로 편집 가능하게 할 지 여부를 설정합니다.
- Default Value:
- true
-
enableDataEffectBoolean
-
이펙트(애니메이션 효과)를 적용할 지 여부를 설정합니다.
- Default Value:
- true
-
formatterObject
-
게이지 값(라벨), 눈금 라벨, 데이터 팁에 적용 가능한 포맷터를 설정합니다.
- Default Value:
- null
-
frameFillObject
-
게이지의 기초 스킨에 대한 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#ffffff", 1)
-
frameStrokeObject
-
기초 스킨의 테두리 선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#ff812d", 10, 1)
-
frameTypeString
-
게이지 프레임의 유형을 설정합니다.
유효값은 circle, flat 입니다.
- Default Value:
- circle
-
hideTickLabelString
-
차트 구간이 360 도인 경우 시작 라벨과 마지막 라벨이 만나게 되는데 이 때 시작 라벨 또는 마지막 라벨 표시 여부를 설정합니다.
유효값은 first, last, none 입니다.
- Default Value:
- none
-
intervalNumber
-
최소값과 최대값을 기준으로 interval 값의 간격을 두고 눈금을 생성합니다.
- Default Value:
- NaN
-
isValueTopBoolean
-
게이지 값(라벨)을 최상단에 표시할 지 여부를 설정합니다.
- Default Value:
- false
-
labelGapNumber
-
눈금과 라벨 사이의 여백의 크기를 설정합니다.
- Default Value:
- 4
-
liveDraggingBoolean
-
바늘을 마우스로 드래깅했을 때 게이지 값(라벨)이 즉각적으로 변경될 지 여부를 설정합니다.
- Default Value:
- true
-
majorTickTypeString
-
눈금의 형태를 설정합니다.
유효값은 circle, line 입니다.
- Default Value:
- circle
-
maximumNumber
-
게이지 값(라벨)의 최대값을 설정합니다.
- Default Value:
- 100
-
maximumAngleNumber
-
게이지의 최대 각도를 설정합니다.
- Default Value:
- 360
-
minimumNumber
-
게이지 값(라벨)의 최소값을 설정합니다.
- Default Value:
- 0
-
minimumAngleNumber
-
게이지의 최소 각도를 설정합니다.
- Default Value:
- 0
-
minorIntervalNumber
-
눈금과 눈금 사이에 표시되는 보조 눈금들(minor tick) 사이의 간격을 설정합니다.
- Default Value:
- NaN
-
minorTickFillObject
-
보조 눈금의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#cdcccc")
-
minorTickRadiusNumber
-
보조 눈금의 반지름을 픽셀 단위로 설정합니다.
- Default Value:
- 1
-
minorTickStrokeObject
-
보조 눈금 선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#cdcccc", 1, 0.5)
-
minorTickTypeString
-
보조 눈금의 형태를 설정합니다.
유효값은 circle, line 입니다.
- Default Value:
- circle
-
needleBackLengthRatioNumber
-
게이지 바늘 커버 뒤쪽에 표시되는 바늘의 하단부에 대한 비율을 설정합니다.
이는 게이지의 반지름에 대한 비율입니다.유효값은 0 과 1 사이의 값입니다.
- Default Value:
- 0
-
needleCoverFillObject
-
게이지 바늘 커버의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#2c2c2c")
-
needleCoverRadiusNumber
-
게이지 바늘 커버의 반지름을 픽셀 단위로 설정합니다.
- Default Value:
- 15
-
needleCoverStrokeObject
-
게이지 바늘 커버의 선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#2c2c2c", 1, 0.5)
-
needleFillObject
-
게이지 바늘의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#2c2c2c")
-
needleLengthRatioNumber
-
게이지 바늘의 길이를 설정합니다.
이는 게이지의 반지름에 대한 비율입니다.
예를 들어, 값이 1 이면 게이지 반지름과 같은 크기의 바늘이 생성됩니다.유효값은 0 과 1 사이의 값입니다.
- Default Value:
- 0.85
-
needlePointStyleString
-
게이지 바늘의 모양을 설정합니다. 뽀족한 모양과 둥근 모양으로 설정할 수 있습니다.
유효값은 steeple, round 입니다.
- Default Value:
- steeple
-
needleStrokeObject
-
게이지 바늘의 테두리 선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#2c2c2c", 1, 0.5)
-
needleThicknessNumber
-
게이지 바늘의 두께를 설정합니다. (픽셀 단위)
- Default Value:
- 10
-
needleTrackColorEnableBoolean
-
trackColor 속성이 적용될 시, 바늘이 가르키는 trackColor 의 색상에 따라서 바늘 커버 색상이 변경될 지 여부를 설정합니다.
- Default Value:
- false
-
outFrameFillObject
-
showOutFrame 속성값이 true 일 경우 생성되는 프레임의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#f5f5f5")
-
outFrameLabelXOffsetNumber
-
showOutFrame 속성값이 true 일 경우 생성되는 프레임의 라벨의 X 오프셋(수평위치 이동) 값을 설정합니다.
- Default Value:
- 0
-
outFrameLabelYOffsetNumber
-
showOutFrame 속성값이 true 일 경우 생성되는 프레임의 라벨의 Y 오프셋(수직위치 이동) 값을 설정합니다.
- Default Value:
- 0
-
outFrameStrokeObject
-
showOutFrame 속성값이 true 일 경우 생성되는 프레임의 테두리 선 색상을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#555555", 5, 1)
-
paddingNumber
-
게이지의 상,하,좌,우 여백의 크기를 설정합니다.
- Default Value:
- 0
-
pointThicknessNumber
-
게이지 바늘 끝의 두께를 설정합니다.
- Default Value:
- 0
-
rotateTickLabelBoolean
-
눈금의 각도에 맞추어 눈금 라벨을 회전하여 표시할 지 여부를 설정합니다.
- Default Value:
- false
-
secondIntervalNumber
-
두 번째 값(라벨)에 대한 최소값과 최대값을 기준으로 interval 값의 간격을 두고 눈금을 생성합니다.
- Default Value:
- NaN
-
secondLabelGapNumber
-
게이지의 두 번째 눈금과 라벨 사이의 여백의 크기를 설정합니다.
- Default Value:
- 4
-
secondMajorTickTypeString
-
게이지의 두 번째 눈금의 형태를 설정합니다.
유효값은 circle, line 입니다.
- Default Value:
- circle
-
secondMaximumNumber
-
게이지 두 번째 값(라벨)의 최대값을 설정합니다.
- Default Value:
- 100
-
secondMinimumNumber
-
게이지 두 번째 값(라벨)의 최소값을 설정합니다.
- Default Value:
- 0
-
secondMinorIntervalNumber
-
두 번째 값(라벨)에 대한 눈금과 눈금 사이에 표시되는 보조 눈금들(minor tick) 사이의 간격을 설정합니다.
- Default Value:
- NaN
-
secondMinorTickFillObject
-
게이지의 두 번째 보조 눈금의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#cdcccc")
-
secondMinorTickGapNumber
-
게이지의 두 번째 프레임 테두리와 보조 눈금 사이의 여백의 크기를 설정합니다.
- Default Value:
- 2
-
secondMinorTickRadiusNumber
-
게이지의 두 번재 보조 눈금의 반지름을 픽셀 단위로 설정합니다.
- Default Value:
- 1
-
secondMinorTickStrokeObject
-
게이지의 두 번째 보조 눈금 선의 색상을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#cdcccc", 1, 0.5)
-
secondMinorTickTypeString
-
게이지의 두 번째 보조 눈금의 형태를 설정합니다.
유효값은 circle, line 입니다.
- Default Value:
- circle
-
secondTickFillObject
-
게이지의 두 번째 눈금의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#ff812d")
-
secondTickGapNumber
-
게이지의 두 번째 프레임 테두리와 눈금 사이의 여백의 크기를 설정합니다.
- Default Value:
- 2
-
secondTickLabelPlacementString
-
게이지의 두 번째 눈금 라벨의 위치를 눈금을 기준으로 안쪽에 위치할 지 바깥쪽에 위치할 지를 설정합니다.
유효값은 inside, outside 입니다.
- Default Value:
- inside
-
secondTickLabelStyleNameString
-
두 번째 눈금 라벨의 스타일을 설정합니다.
- Default Value:
- null
-
secondTickRadiusNumber
-
게이지의 두 번째 눈금의 반지름을 설정합니다.
- Default Value:
- 3
-
secondTickStrokeObject
-
게이지의 두 번째 눈금 선의 색상을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#ff812d", 1, 0.5)
-
secondTrackAlphasArray
-
secondMinimum 값과 secondMaximum 값 사이의 구간별로 표시되는 두 번째 컬러 트랙의 색상에 대한 투명도를 설정합니다.
- Default Value:
- null
-
secondTrackColorsArray
-
secondMinimum 값과 secondMaximum 값 사이의 구간별로 표시되는 두 번째 컬러 트랙의 색상값을 설정합니다.
예를 들어, secondTrackColors=[#FFFF00, #0000FF, #FF0000] 와 같이 구간별로 색상을 설정할 수 있습니다.- Default Value:
- null
-
secondTrackInnerRadiusNumber
-
secondMinimum 값과 secondMaximum 값 사이의 구간별로 표시되는 두 번째 컬러 트랙의 안쪽 범위를 설정합니다.
값이 0 이면 게이지 정중앙을 의미하고, 1 이면 게이지의 테두리 직전까지입니다.유효값은 0 과 1 사이의 값입니다.
- Default Value:
- 0
-
secondTrackLabelsArray
-
secondMinimum 값과 secondMaximum 값 사이의 구간별로 표시되는 두 번째 트랙에 라벨을 설정합니다.
- Default Value:
- null
-
secondTrackLabelStyleNameString
-
secondTrackLabels 속성에 설정된 라벨들의 스타일을 설정합니다.
- Default Value:
- null
-
secondTrackLabelsXOffsetArray
-
secondTrackLabels 속성에 설정된 라벨들의 X 오프셋(수평위치 이동) 값을 설정합니다.
X 오프셋 값 만큼 이동합니다.- Default Value:
- null
-
secondTrackLabelsYOffsetArray
-
secondTrackLabels 속성에 설정된 라벨들의 Y 오프셋(수직위치 이동) 값을 설정합니다.
Y 오프셋 값 만큼 이동합니다.- Default Value:
- null
-
secondTrackOuterRadiusNumber
-
secondMinimum 값과 secondMaximum 값 사이의 구간별로 표시되는 두 번째 컬러 트랙의 바깥쪽 범위를 설정합니다.
값이 0 이면 게이지 정중앙을 의미하고, 1 이면 게이지의 테두리 직전까지입니다.유효값은 0 과 1 사이의 값입니다.
- Default Value:
- 0
-
secondTrackValuesArray
-
두 번째 게이지 값(라벨)에 대한 minimum 값과 maximum 값 사이의 구간별로 표시되는 컬러 트랙의 범위를 설정합니다.
예를 들어, minimum=0, maximum=100 이고, trackValues=[0,50,80,100] 이면, 0~50, 50~80, 80~100 구간에 색상을 설정할 수 있습니다.- Default Value:
- null
-
showDataTipBoolean
-
게이지의 바늘에 마우스 오버 시 게이지의 데이터 팁에 대한 표시 여부를 설정합니다.
- Default Value:
- true
-
showOutFrameBoolean
-
minimumAngle 값과 maximumAngle 값 사이에 포함되지 않는 영역을 별도로 표시할 지 여부를 설정합니다.
- Default Value:
- false
-
showSecondMinorTickBoolean
-
게이지 두 번째 값(라벨)을 위한 보조 눈금에 대한 표시 여부를 설정합니다.
- Default Value:
- false
-
showSecondTickBoolean
-
게이지 두 번째 값(라벨)을 위한 눈금에 대한 표시 여부를 설정합니다.
- Default Value:
- false
-
showSecondTickLabelsBoolean
-
게이지의 두 번째 눈금 라벨의 표시 여부를 설정합니다.
- Default Value:
- false
-
showSecondTrackColorArray
-
게이지의 secondMinimum 값과 secondMaximum 값 사이의 범위에 따라서 게이지의 두 번째 트랙을 표시할 지 여부를 설정합니다.
- Default Value:
- false
-
showSecondValueLabelBoolean
-
게이지의 보조 값(두 번째 라벨)의 표시 여부를 설정합니다.
- Default Value:
- false
-
showTickLabelsBoolean
-
눈금 라벨의 표시 여부를 설정합니다.
- Default Value:
- true
-
showTrackColorBoolean
-
게이지의 minimum 값과 maximum 값 사이의 범위에 따라서 게이지의 트랙을 표시할 지 여부를 설정합니다.
- Default Value:
- false
-
showValueLabelBoolean
-
게이지 값(라벨)의 표시 여부를 설정합니다.
- Default Value:
- true
-
startAngleNumber
-
시작 각도 값을 설정합니다.
- Default Value:
- 0
-
tickFillObject
-
눈금의 색상을 설정합니다.
유효값은 SolidColor 클래스의 인스턴스입니다.
- Default Value:
- SolidColor("#ff812d")
-
tickGapNumber
-
게이지 테두리와 눈금 사이의 여백의 크기를 설정합니다.
- Default Value:
- 2
-
tickLabelPlacementString
-
눈금 라벨의 위치를 눈금을 기준으로 안쪽에 위치할 지 바깥쪽에 위치할 지를 설정합니다.
유효값은 inside, outside 입니다.
- Default Value:
- inside
-
tickLabelStyleNameString
-
눈금 라벨의 스타일을 설정합니다.
-
tickRadiusNumber
-
눈금의 반지름을 픽셀 단위로 설정합니다.
- Default Value:
- 3
-
tickStrokeObject
-
눈금 선에 대한 스타일을 설정합니다.
유효값은 Stroke 클래스의 인스턴스입니다.
- Default Value:
- Stroke("#ff812d", 1, 0.5)
-
trackAlphasArray
-
minimum 값과 maximum 값 사이의 구간별로 표시되는 컬러 트랙의 색상에 대한 투명도를 설정합니다.
- Default Value:
- null
-
trackColorsArray
-
minimum 값과 maximum 값 사이의 구간별로 표시되는 컬러 트랙의 색상값을 설정합니다.
예를 들어, trackColors=[#FFFF00, #0000FF, #FF0000] 와 같이 구간별로 색상을 설정할 수 있습니다.- Default Value:
- null
-
trackInnerRadiusNumber
-
minimum 값과 maximum 값 사이의 구간별로 표시되는 컬러 트랙의 안쪽 범위를 설정합니다.
값이 0 이면 게이지 정중앙을 의미하고, 1 이면 게이지의 테두리 직전까지입니다.유효값은 0 과 1 사이의 값입니다.
- Default Value:
- 0
-
trackLabelsArray
-
minimum 값과 maximum 값 사이의 구간별로 표시되는 트랙에 라벨을 설정합니다.
- Default Value:
- null
-
trackLabelsXOffsetArray
-
trackLabels 속성에 설정된 라벨들의 X 오프셋(수평위치 이동) 값을 설정합니다.
X 오프셋 값 만큼 이동합니다.
값의 형태는 배열입니다. 예) [0, 0.1, 0.2]
값이 -1 에 가까울수록 라벨이 표시될 박스의 왼쪽에 가까워지고, 값이 1 에 가까울수록 라벨이 표시될 박스의 오른쪽에 가까워집니다.- Default Value:
- null
-
trackLabelsYOffsetArray
-
trackLabels 속성에 설정된 라벨들의 Y 오프셋(수직위치 이동) 값을 설정합니다.
Y 오프셋 값 만큼 이동합니다.
값의 형태는 배열입니다. 예) [0, 0.1, 0.2]
값이 -1 에 가까울수록 라벨이 표시될 박스의 위쪽에 가까워지고, 값이 1 에 가까울수록 라벨이 표시될 박스의 아래쪽에 가까워집니다.- Default Value:
- null
-
trackOuterRadiusNumber
-
minimum 값과 maximum 값 사이의 구간별로 표시되는 컬러 트랙의 바깥쪽 범위를 설정합니다.
값이 0 이면 게이지 정 중앙을 의미하고, 1 이면 게이지의 테두리 직전까지입니다.유효값은 0 과 1 사이의 값입니다.
- Default Value:
- 0
-
trackValuesArray
-
minimum 값과 maximum 값 사이의 구간별로 표시되는 컬러 트랙의 범위를 설정합니다.
예를 들어, minimum=0, maximum=100 이고, trackValues=[0,50,80,100] 이면, 0~50, 50~80, 80~100 구간에 색상을 설정할 수 있습니다.- Default Value:
- null
-
valueLabelBorderRadiusNumber
-
게이지 값(라벨)이 표시되는 영역의 모서리 둥글기 정도를 설정합니다.
- Default Value:
- 6
-
valueLabelPaddingNumber
-
게이지 값(라벨)이 표시되는 영역에서 상,하,좌,우 여백의 크기를 설정합니다.
- Default Value:
- 10
-
valueLabelStyleNameString
-
게이지 값(라벨)의 스타일을 설정합니다.
-
valueXOffsetNumber
-
게이지 값(라벨)이 표시되는 X 값(수평위치)의 오프셋(Offset)을 설정합니다.
라벨의 위치를 이동시킬 수 있습니다.- Default Value:
- 0
-
valueYOffsetNumber
-
게이지 값(라벨)이 표시되는 Y 값(수직위치)의 오프셋(Offset)을 설정합니다.
라벨의 위치를 이동시킬 수 있습니다.- Default Value:
- 0
Methods
-
inherited dataTipJsFunction(value)
-
데이터 팁을 재정의하는 자바스크립트 함수명을 설정합니다.
<CircularGauge ... dataTipJsFunction="dataTipFunction" ...> ... dataTipFunction(value) { return "<font color='#FF2200'>Value: " + Math.round(value) + "</font>"; }
Name Type Description value
Number 데이터 값
-
inherited labelClickJsFunction(value)
-
라벨을 클릭했을 때 실행될 자바스크립트 함수명을 설정합니다.
<CircularGauge ... labelClickJsFunction="labelClickJsFunc" ...> ... labelClickJsFunc(value) { ... }
Name Type Description value
String 라벨
-
inherited labelJsFunction(value)
-
게이지 값(라벨)을 표시하는 자바스크립트 함수명을 설정합니다.
<CircularGauge ... labelJsFunction="labelFunc" ...> ... labelFunc(value) { return "<font color='#ff812d'>" + value + " mph</font>"; }
Name Type Description value
Number 게이지 라벨 값
-
inherited secondLabelJsFunction(value)
-
게이지 두 번째 값(라벨)을 표시하는 자바스크립트 함수명을 설정합니다.
<CircularGauge ... secondLabelJsFunction="labelFunc" ...> ... labelFunc(value) { return "<font color='#ff812d'>" + value + " mph</font>"; }
Name Type Description value
Number 게이지 라벨 값
-
inherited tickLabelJsFunction(value)
-
눈금(major tick) 라벨을 표시하는 자바스크립트 함수명을 설정합니다.
<CircularGauge ... tickLabelJsFunction="tickLabelJsFunc" ...> ... tickLabelJsFunc(value) { return "<font color='#ff812d'>" + value + " </font>"; }
Name Type Description value
Number 게이지 라벨 값
-
inherited valueChangeFunction(value)
-
데이터 변경 시 호출될 자바스크립트 함수명을 설정합니다.
<CircularGauge ... valueChangeFunction="valueChangeFunc" ...> ... valueChangeFunc(value) { ... }
Name Type Description value
Number 데이터 값