Class: CircularGauge

<rMateChart backgroundColor="0xEEEEEE" borderRadius="12" borderStyle="solid">
  <Options>
    <Caption text="Gauge" />
  </Options>
  <CircularGauge width="300" height="300" tickLabelStyleName="tickText" valueLabelStyleName="valueText" ...>
  </CircularGauge>
  <Style>
    .valueText {
      fontSize:18;
    }
    .tickText {
      fontFamily:Myriad;
    }
  </Style>
</rMateChart>

Members

animationDurationNumber

이펙트(애니메이션 효과)가 지속되는 시간을 설정합니다.

Default Value:

• 800

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

dataTipJsFunction(value)

데이터 팁을 재정의하는 자바스크립트 함수명을 설정합니다.

<CircularGauge ... dataTipJsFunction="dataTipFunction" ...>
...
dataTipFunction(value) {
  return "<font color='#FF2200'>Value: " + Math.round(value) + "</font>";
}

Name	Type	Description
value	Number	데이터 값

labelClickJsFunction(value)

라벨을 클릭했을 때 실행될 자바스크립트 함수명을 설정합니다.

<CircularGauge ... labelClickJsFunction="labelClickJsFunc" ...>
...
labelClickJsFunc(value) {
  ...
}

Name	Type	Description
value	String	라벨

labelJsFunction(value)

게이지 값(라벨)을 표시하는 자바스크립트 함수명을 설정합니다.

<CircularGauge ... labelJsFunction="labelFunc" ...>
...
labelFunc(value) {
  return "<font color='#ff812d'>" + value + " mph</font>";
}

Name	Type	Description
value	Number	게이지 라벨 값

secondLabelJsFunction(value)

게이지 두 번째 값(라벨)을 표시하는 자바스크립트 함수명을 설정합니다.

<CircularGauge ... secondLabelJsFunction="labelFunc" ...>
...
labelFunc(value) {
  return "<font color='#ff812d'>" + value + " mph</font>";
}

Name	Type	Description
value	Number	게이지 라벨 값

tickLabelJsFunction(value)

눈금(major tick) 라벨을 표시하는 자바스크립트 함수명을 설정합니다.

<CircularGauge ... tickLabelJsFunction="tickLabelJsFunc" ...>
...
tickLabelJsFunc(value) {
  return "<font color='#ff812d'>" + value + " </font>";
}

Name	Type	Description
value	Number	게이지 라벨 값

valueChangeFunction(value)

데이터 변경 시 호출될 자바스크립트 함수명을 설정합니다.

<CircularGauge ... valueChangeFunction="valueChangeFunc" ...>
...
valueChangeFunc(value) {
  ...
}

Name	Type	Description
value	Number	데이터 값