new HCylinderGauge()
HCylinderGauge 클래스는 가로 방향의 실린더 모양으로 목표값과 실적값을 표현합니다.
실린더의 바깥 모양(유리관 모양)에 목표값을 표현하고, 안쪽 기둥을 실적값으로 표현하면 목표값 대비 실적값을 직관적으로 표현할 수 있습니다.
HCylinderGauge 는 다음과 같은 기능 및 특징을 가지고 있습니다.
- 목표값과 실적값을 자유롭게 조정할 수 있습니다.
- 안쪽 기둥의 색상을 변경 할 수 있습니다.
- 안쪽 기둥의 넓이를 조절하여, 바깥 모양(유리관 모양)과 간격을 띄워서 좀 더 직관적으로 실적값을 표현할 수 있습니다.
- 실적값(안쪽 기둥이 가르키는 값)을 텍스트로 보여줄 수 있으며, 텍스트의 모양 및 위치 조정이 가능합니다.
레이아웃은 다음과 같은 형식으로 작성됩니다.
<rMateChart backgroundColor="0xFFFFFF" borderRadius="12" horizontalAlign="center" verticalAlign="middle" borderStyle="solid">
<CurrencyFormatter id="cft" currencySymbol="%" alignSymbol="right"/>
<HCylinderGauge width="400" height="150" minimum="0" maximum="200" valueLabelStyleName="valueLabel" ... />
<Style>
.valueLabel {
fontSize:11;
fontWeight:bold;
}
</Style>
</rMateChart>
Extends
Members
-
cylinderAlphaArray
-
실린더 기둥(안쪽)의 투명도를 설정합니다.
- Default Value:
- [1, 1, 1]
-
cylinderColorArray
-
실린더 기둥(안쪽)의 색상을 설정합니다.
- Default Value:
- [#db88db, #ffffff, #db88db]
-
cylinderColumnWidthNumber
-
실린더 기둥(안쪽)의 넓이(픽셀 단위)를 설정합니다.
- Default Value:
- 0.8
-
cylinderCoverRatioArray
-
실린더 기둥 위쪽 커버의 그리기 영역을 설정합니다.
- Default Value:
- [0, 0, 255]
-
cylinderRatioArray
-
실린더 기둥(안쪽)의 그리기 영역을 설정합니다.
- Default Value:
- [0, 0, 255]
-
cylinderWidthNumber
-
실린더의 전체(바깥쪽) 넓이(픽셀 단위)를 설정합니다.
-
dataTipFontSizeNumber
-
데이터 팁의 폰트 크기를 설정합니다.
- Default Value:
- 10
-
formatterObject
-
게이지에 표시되는 눈금의 라벨값에 적용 가능한 포맷터를 설정합니다.
- Default Value:
- null
-
labelOffsetNumber
-
눈금(tick)과 레이블 사이의 간격의 크기를 설정합니다.
음수를 설정하면 절대값이 적용됩니다.- Default Value:
- 10
-
labelsArray
-
게이지에 표시되는 눈금의 라벨을 설정합니다.
- Default Value:
- null
-
maximumNumber
-
게이지의 최대값을 설정합니다.
- Default Value:
- 0
-
minimumNumber
-
게이지의 최소값을 설정합니다.
- Default Value:
- 0
-
offsetOfthumbNumber
-
썸(thumb)과 게이지의 여백의 크기를 설정합니다.
- Default Value:
- 6
-
paddingNumber
-
게이지 여백의 크기를 설정합니다.
- Default Value:
- 0
-
showDataTipBoolean
-
마우스 오버 시 게이지의 데이터 팁에 대한 표시 여부를 설정합니다.
- Default Value:
- true
-
showTrackHighlightBoolean
-
안쪽 기둥 표시 여부를 설정합니다.
- Default Value:
- true
-
showValueLabelBoolean
-
게이지 값(라벨)을 표시할 지 여부를 설정합니다.
- Default Value:
- true
-
slideDurationNumber
-
실린더 기둥(안쪽)이 그려질 때 이펙트 시간을 설정합니다.
- Default Value:
- 300
-
targetMarkNumber
-
실린더의 바깥 모양(유리관 모양)의 위치를 설정합니다.
- Default Value:
- 8
-
targetMarkAlphaArray
-
실린더 바깥 모양의 투명도를 설정합니다.
- Default Value:
- [0.7, 0.7, 0.7]
-
targetMarkColorArray
-
실린더 바깥 모양의 색상을 설정합니다.
- Default Value:
- [#eaeaea, #eaeaea, #eaeaea]
-
targetMarkRatioArray
-
실린더 바깥 모양의 그리기 영역을 설정합니다.
- Default Value:
- [0, 128, 255]
-
thumbVisibleBoolean
-
썸(thumb)에 대한 숨기기 여부를 설정합니다.
- Default Value:
- false
-
tickColorHexadecimal
-
눈금(tick)과 눈금 라벨(tick label)의 색상을 설정합니다.
- Default Value:
- #6f7777
-
tickIntervalNumber
-
게이지에 표시되는 눈금의 간격을 설정합니다.
- Default Value:
- 10
-
tickLengthNumber
-
눈금(tick)의 길이를 설정합니다.
- Default Value:
- 3
-
tickOffsetNumber
-
실린더 기둥과 눈금(tick) 사이 여백의 크기를 설정합니다.
- Default Value:
- 6
-
tickThicknessNumber
-
눈금(tick)의 두께를 설정합니다.
- Default Value:
- 1
-
valueLabelStyleNameString
-
게이지 값(라벨)의 스타일을 설정합니다.
-
valueLabelXOffsetNumber
-
게이지 값(라벨) 위치의 X 오프셋(수평위치 이동) 값을 설정합니다.
X 오프셋 값 만큼 이동합니다.- Default Value:
- 0
-
valueLabelYOffsetNumber
-
게이지 값(라벨) 위치의 Y 오프셋(수직위치 이동) 값을 설정합니다.
Y 오프셋 값 만큼 이동합니다.- Default Value:
- 0
Methods
-
inherited innerTipJsFunction(value)
-
안쪽 게이지의 데이터 팁 출력 시 실행될 자바스크립트 함수명을 설정합니다.
원하는 형태 표시할 수 있도록 하는 사용자 정의 함수를 설정할 수 있습니다.<VCylinderGauge ... innerTipJsFunction="innerTipJsFunc" ...> ... innerTipJsFunc(value) { ... }
Name Type Description value
Number 데이터 값
-
inherited labelJsFunction(value)
-
게이지 값(라벨)을 표시하는 자바스크립트 함수명을 설정합니다.
함수는 게이지 값을 인수로 받아서 사용자가 원하는 표현을 가능하게 하는 양식을 스트링 형태로 반환합니다.<VCylinderGauge ... labelJsFunction="labelJsFunc" ...> ... labelJsFunc(value) { ... }
Name Type Description value
Number 데이터 값
-
inherited targetTipJsFunction(value)
-
목표 라인 게이지의 데이터 팁 출력 시 실행될 자바스크립트 함수명을 설정합니다.
원하는 형태 표시할 수 있도록 하는 사용자 정의 함수를 설정할 수 있습니다.<VCylinderGauge ... targetTipJsFunction="targetTipJsFunc" ...> ... targetTipJsFunc(value) { ... }
Name Type Description value
Number 데이터 값
-
inherited tickJsFunction(value)
-
눈금 라벨이 출력 시 실행될 자바스크립트 함수명을 설정합니다.
원하는 형태 표시할 수 있도록 하는 사용자 정의 함수를 설정할 수 있습니다.<VCylinderGauge ... tickJsFunction="tickJsFunc" ...> ... tickJsFunc(value) { ... }
Name Type Description value
Number 데이터 값
-
inherited valueChangeFunction(value)
-
게이지 값(라벨)이 변경되었을 때 실행될 자바스크립트 함수명을 설정합니다.
함수는 변경된 게이지 값을 인수로 받아서 사용자가 원하는 작업을 실행할 수 있습니다.<VCylinderGauge ... valueChangeFunction="valueChangeFunc" ...> ... valueChangeFunc(value) { ... }
Name Type Description value
Number 데이터 값