게이지에 텍스트 표시

showText 속성을 사용하여 최소/최대/값 속성을 게이지에 텍스트로 표시할 수 있습니다. 옵션에는:

• None: 게이지에 텍스트를 표시하지 마세요.
• Value: 게이지의 값을 텍스트로 표시합니다. 방사형 게이지의 경우 값이 중앙에 표시됩니다. 선형 게이지의 경우 값이 섬(Thumb)에 표시됩니다.
• MinMax: 게이지의 최소값과 최대값을 텍스트로 표시합니다.
• All: 게이지의 값, 최소값,최대값을 텍스트로 표시합니다.

기본값은 RadialGauge 컨트롤의 경우 ShowText.All이고, LinearGauge 과 BulletGraph 컨트롤의 경우 ShowText.None입니다.

예시:

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

var myRadialGauge = new gauge.RadialGauge('#myRadialGauge');
myRadialGauge.showText = 'All';

모두::

값:

최소최대:

게이지 텍스트 포맷팅

format 속성을 사용하여 숫자 값을 문자열로 변환하는 데 사용되는 양식 문자열을 설정합니다. 포맷은 표시되는 모든 텍스트에 적용됩니다.

예시:

myRadialGauge.format = 'n0';

Customizing the Gauge Text

getText 콜백 함수를 사용하여 사용자 정의 문자열을 제공합니다. 'part' 매개변수를 사용하여 사용자 정의할 텍스트 부분(값, 최소값, 최대값)을 결정합니다.

다음 예에서는 값 텍스트를 'Good', 'Low...' 또는 'Empty'로 표시합니다.

myRadialGauge.getText = getTextCallback;

// getText callback function
function getTextCallback (gauge, part, value, text) {
    switch (part) {
        case 'value':
	      if (value <= 10) return 'Empty!';
	      if (value <= 25) return 'Low...';
	      if (value <= 95) return 'Good';
	      return 'Full';
	    case 'min':
	      return 'empty';
	    case 'max':
	      return 'full';
	}
	return text;
}