게이지 범위(Gauge Ranges)

"페이스(Face)" 및 "포인터(Pointer)" 범위 외에도, 게이지에는 게이지 내의 구역을 표시하는 추가적인 범위가 포함 될 수 있습니다(예: '불량', '평균', '양호').

다음 단계에 따라 게이지에 다채로운 범위를 추가하실 수 있습니다:

1. 게이지 생성(선형 또는 방사형)
2. 범위 수로 ranges 배열 정의
3. 각 범위의 min, max ,color 속성을 설정하여 범위의 간격과 색상을 정의합니다.
4. 선택적으로, thickness 속성을 0-1 사이의 값으로 설정하여 범위가 얼마나 넓은지 확인합니다(1 = 사용 가능한 두께의 100%).

예시:

import * as gauge from '@grapecity/wijmo.gauge';

// create the gauge with ranges
var myGauge = new gauge.RadialGauge('#myGauge', {
    value: 50,
    showRanges: true,
    ranges: [
    	{ min: 0, max: 30, color: 'red', thickness: .5 },
    	{ min: 30, max: 50, color: 'orange', thickness: .5 },
    	{ min: 50, max: 70, color: 'gold', thickness: .5 },
    	{ min: 70, max: 100, color: 'green', thickness: .5 },
    ]
  });

범위를 포인터 색상으로 표시

게이지의 showRanges 속성을 false로 설정하면, 추가 범위가 표시되지 않습니다. 대신, 현재 값을 기준으로 "포인터(Pointer)" 색상을 자동으로 설정하는 데 사용됩니다.

예시:

myGauge.showRanges = false;

Stacked Ranges

stackRanges 속성을 true로 설정하면 게이지의 모든 범위를 나란히 표시할 수 있습니다. 이 기법을 통해 하나의 게이지에 여러 값을 표시할 수 있습니다.

범위 객체의 max 속성을 변경하여 개별적으로 업데이트합니다.

import * as gauge from '@grapecity/wijmo.gauge';

// create the gauges
var myRadialGauge = new gauge.RadialGauge('#myRadialGauge', {
    value: 25,
    stackRanges: true,
    ranges: [
      { max: 25, color: 'red' },
      { max: 50, color: 'purple' },
      { max: 75, color: 'orange' }
      ]
});

범위 스타일링

범위의 색상과 위치는 주로 'showRanges' 와 'ranges' 속성 값으로 정의됩니다. 그러나 범위의 전체 스타일 속성을 컨트롤하여 hover 스타일을 적용할 수도 있습니다.

.wj-gauge .wj-ranges {
  opacity: .25;
}
.wj-gauge:hover .wj-ranges {
  opacity: 1;
  transition: opacity 600ms;
}