gauge[type=circle]
Circle의 기능을 사용하기 위해서는 'gauge'모듈이 필요하다. 자세한 설명은 guide/modules에서 확인할 수 있다.
원형 게이지.
type은 'circle'이다.
지정된 최대 각도 내에서 현재 값의 비율을 원호로 표시한다.
Options
animatable: boolean
value 변화를 애니메이션으로 표현한다.
backgroundStyle: SVGStyles|string
band
게이지 본체 주변이나 내부에 값 영역들을 구분해서 표시하는 band의 모델.
bottom: string|number
plot 영역의 아래쪽 모서리와 wid사이의 간격.
bottom이 설정되면 이 속성은 무시된다.
centerX: string|number
게이지 중심 수평 위치. 픽셀 단위의 크기나, plot 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
centerY: string|number
게이지 중심 수직 위치. 픽셀 단위의 크기나, plot 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
clockwise: boolean
true면 시계 방향으로 회전한다.
default :true
col: number
분할 모드일 때 게이지가 표시될 pane의 수평 index.
duration: number
Animation duration.
hand
게이지 바늘 설정 모델.
height: string|number
게이지 높이. 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
innerRadius: string|number
내부 원호의 반지름.
픽셀 단위의 크기나, radius에 대한 상대적 크기로 지정할 수 있다.
'100%'이면 게이지 원호의 반지름과 동일하다.
innerStyle: SVGStyles|string
내부 원에 적용할 스타일셋 또는 css selector (opens in a new tab).
label
게이지 중앙에 표시되는 label 설정 모델
left: string|number
plot 영역의 왼쪽 모서리와 wid사이의 간격.
maxValue: number
최대값. group에 포함되면 이 값 대신 group의 최대값이 사용된다.
minValue: number
최소값. group에 포함되면 이 값 대신 group의 최소값이 사용된다.
name: string
게이지 이름. 동적으로 게이지를 다루기 위해서는 반드시 지정해야 한다.
pin
게이지 중앙에 표시되는 핀 설정 모델.
radius: string|number
게이지 원호의 반지름. 픽셀 단위의 크기나, plot 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다. '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
right: string|number
plot 영역의 오른쪽 모서리와 widget 사이의 간격.
left가 설정되면 이 속성은 무시된다.
rim
게이지 배경 원호 테두리 설정 모델.
row: number
분할 모드일 때 게이지가 표시될 pane의 수직 index.
scale
스케일 모델.
size: string|number
startAngle: number
게이지 원호 시작 각도. 지정하지 않거나 잘못된 값이면 0으로 계산된다. 0은 시계의 12시 위치다.
default :0
style: SVGStyles|string
스타일셋 또는 css selector (opens in a new tab).
sweepAngle: number
게이지 원호 전체 각도. 0 ~ 360 사이의 값으로 지정해야 한다. 범위를 벗어난 값은 범위 안으로 조정된다. 지정하지 않거나 잘못된 값이면 360으로 계산된다. 예) 180 이면 반 원호가 된다.
default :360
top: string|number
plot 영역의 위쪽 모서리와 wid사이의 간격.
type: 'circle'
value: number
현재값.
valueRadius: string|number
값을 나타내는 원호의 반지름.
픽셀 단위의 크기나,
radius와 innerRadius로 결정된 기본 rim의 중점에 대한 상대적 크기로 지정할 수 있다.
지정하지 않거나 '100%'이고 valueRim의 두께가
기본 rim의 두께와 동일하면 게이지 원호의 반지름과 동일하게 표시된다.
valueRim
게이지의 값 원호 테두리 설정 모델.
visible: boolean
표시 여부.
default :true
width: string|number
게이지 너비. 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.