게이지 위젯
게이지 위젯은 특정 범위 내의 단일 값을 시각화하는 바늘 게이지를 표시합니다. 다음과 같은 방법으로 위젯을 구성할 수 있습니다.
• 게이지에 포함할 섹션 또는 간격의 수를 정의합니다.
• 값 레이블의 표시 유형 및 서식 적용을 제어합니다.
• 조리개 및 참조 각도 값을 설정하여 데이터 범위 표시 방식을 제어합니다.
• 데이터를 설명하는 범례를 표시합니다.
• 눈금 표시자, 바늘, 가운데 점 및 게이지 테두리의 크기를 제어합니다.
게이지 위젯에 데이터 바인딩
게이지 위젯에 데이터를 표시하려면 숫자 속성을 해당 Data 속성에 바인딩해야 합니다.
1. Mashup Builder에서 서비스의 숫자 속성을 위젯 Data 속성에 바인딩합니다.
2. 속성 패널에서 다음 속성을 구성합니다.
◦ 게이지에서 범위를 설정하려면 MinValue 및 MaxValue 속성을 사용합니다.
◦ 위젯의 값 및 레이블에 서식을 지정하려면 ValueDecimals 및 LabelDecimals 속성을 사용합니다.
◦ 값 범위의 조리개를 설정하려면 Aperture 속성을 사용합니다. 기본적으로 조리개는 255로 설정됩니다.
3. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
런타임에 바인딩된 데이터 서비스가 실행될 때 게이지 값이 표시됩니다.
데이터 소스를 ValueDecimals 및 LabelDecimals 속성에 바인딩하여 소수 자릿수를 동적으로 설정할 수 있습니다. 데이터 유형에 따라 특정 형식의 값 및 레이블 소수 자릿수가 필요할 수 있습니다. 예를 들어, 게이지에 여러 소스의 데이터가 표시될 경우 값 서식을 현재 데이터 유형과 일치시킬 수 있습니다.
게이지 값 레이블 구성
기본적으로 위젯은 게이지 바늘을 사용하여 현재 값을 표시합니다. ValueDisplayMode 위젯 속성을 사용하여 값을 표시할 수 있습니다. 사용 가능한 옵션:
• 없음 - 값 레이블을 숨깁니다(기본값).
• 내부 - 게이지 내부.
• 맨 위 - 게이지 맨 위.
• 맨 아래 - 게이지 맨 아래.
위젯 속성
 |
스타일 및 공통 위젯 속성은 아래 표에 포함되어 있지 않습니다.
|
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부 (Y/N)
|
로컬리제이션 가능 여부 (Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
CustomClass
|
위젯의 최상위 div에 적용할 사용자 정의 CSS 클래스입니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다.
|
STRING
|
해당 없음
|
Y
|
N
|
||
|
Data
|
위젯 데이터 소스입니다. 단일 숫자 값을 바인딩해야 합니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
||
|
MinValue
|
게이지의 최대값입니다.
|
NUMBER
|
0
|
Y
|
N
|
||
|
MaxValue
|
게이지에 대한 최대값
|
NUMBER
|
100
|
Y
|
N
|
||
|
ValueFormatter
|
게이지 바늘 및 값 표시에 대한 스타일 지정 규칙입니다.
|
STATEFORMATTING
|
상태 서식 적용
|
N
|
N
|
||
|
FormatNeedle
|
바늘에 상태 서식 적용을 적용합니다.
|
BOOLEAN
|
True
|
N
|
N
|
||
|
Intervals
|
게이지의 간격 수(틱, 레이블 및 표시기 링에 영향을 줌)입니다.
|
NUMBER
|
10
|
N
|
N
|
||
|
IntervalsPerLabel
|
레이블당 게이지의 간격 수(레이블 양에 영향을 줌)입니다.
|
NUMBER
|
2
|
N
|
N
|
||
|
LabelDisplayMode
|
레이블을 표시할 위치(내부, 외부 또는 없음)입니다.
|
BOOLEAN
|
내부
|
N
|
N
|
||
|
ShowDataLoading
|
데이터를 로드할 때 회전하는 아이콘을 표시합니다.
|
BOOLEAN
|
True
|
N
|
N
|
||
|
MinorTicks
|
주 틱 사이의 보조 틱 수입니다.
|
NUMBER
|
4
|
N
|
N
|
||
|
TickLength
|
주 틱의 길이입니다.
|
NUMBER
|
8
|
N
|
N
|
||
|
MinorTickLength
|
보조 틱의 길이입니다.
|
NUMBER
|
4
|
N
|
Y
|
||
|
ValueDisplayMode
|
값을 표시할 위치(맨 위, 맨 아래, 내부 또는 없음)입니다.
|
STRING
|
맨 아래
|
N
|
N
|
||
|
LabelDigits
|
레이블 값을 표시하는 데 사용되는 자릿수입니다.
|
NUMBER
|
3
|
N
|
N
|
||
|
LabelDecimals
|
레이블 값을 표시하는 데 사용되는 소수 자릿수입니다.
|
NUMBER
|
0
|
Y
|
N
|
||
|
ValueDigits
|
값을 표시하는 데 사용되는 자릿수입니다.
|
NUMBER
|
3
|
N
|
N
|
||
|
ValueDecimals
|
값을 표시하는 데 사용되는 소수 자릿수입니다.
|
NUMBER
|
0
|
Y
|
N
|
||
|
LegendDisplayMode
|
범례를 표시할 위치(맨 위, 맨 아래 또는 없음)입니다.
|
STRING
|
맨 아래
|
N
|
N
|
||
|
Legend
|
게이지 범례 텍스트입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
||
|
ReferenceAngle
|
게이지 방향을 제어하는 각도(도)입니다.
|
NUMBER
|
225
|
N
|
N
|
||
|
Aperture
|
게이지 크기를 제어하는 각도(도)입니다.
|
NUMBER
|
270
|
N
|
N
|
||
|
NeedleDiameter
|
게이지 바늘 지름(픽셀)입니다.
|
NUMBER
|
10
|
N
|
N
|
||
|
CenterDiameter
|
게이지 중심 지름(픽셀)입니다.
|
NUMBER
|
20
|
N
|
N
|
||
|
GaugeBorder
|
게이지 테두리 너비/두께(픽셀)입니다.
|
NUMBER
|
20
|
N
|
N
|
||
|
RingWidth
|
게이지 링 너비/두께(픽셀)입니다.
|
NUMBER
|
10
|
N
|
N
|
||
|
ToolTipField
|
런타임 시 위젯 위를 가리킬 때 표시되는 선택적 도구 설명입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
||
|
ShowDataLoading
|
데이터 로딩을 표시합니다.
|
BOOLEAN
|
True
|
N
|
N
|
||
|
Visible
|
런타임에 위젯의 표시 유형을 설정합니다.
|
BOOLEAN
|
True
|
Y
|
N
|