게이지 포인터 요소(Pointer Element in Gauges)

"포인터(Pointer)"는 게이지의 현재 값을 나타내는 범위입니다. 포인터 범위의 max 속성은 게이지의 value 속성에 해당합니다.

포인터(Pointer) 사용자 정의

범위의 thickness 과 color 속성을 설정하여 포인터의 두께와 색상을 사용자 정의합니다. 모든 게이지 컨트롤에서 동일합니다.

Gauge Pointerimport * as gauge from '@grapecity/wijmo.gauge';

// create the gauge
var myRadialGauge = new gauge.RadialGauge('#myRadialGauge');
myRadialGauge.pointer.thickness = 0.3;
myRadialGauge.pointer.color = '#ff0000';

CSS로 포인터(Pointer) 스타일 지정

.wj-pointer 클래스를 사용하여 CSS의 포인터에 대한 SVG 속성(채우기, 획, 획 두께)을 설정합니다.

CSS 예시:

.wj-gauge .wj-pointer {
  fill: black;
}

값 변경 시 포인터(Pointer) 색상 업데이트

게이지 값에 따라 바늘의 색상을 사용자 정의하려면, 범위 항목을 확인하시길 바랍니다. Wijmo 게이지에는 색상 범위를 정의할 수 있는 고유한 기능(showRanges 속성)이 있지만 배경보다는 포인터 색상에 적용됩니다.

Wijmo 게이지에는 색상 범위를 정의하지만 배경보다는 포인터 색상에 적용할 수 있는 고유한 기능(showRanges 속성)이 있습니다.

섬 요소(Thumb Element)

섬(Thumb)는 '포인터(pointer)' 범위의 끝에 표시된 원입니다. thumbSize 속성을 사용하여 섬(Thumb) 요소의 크기를 설정합니다.

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

var myGauge = new gauge.RadialGauge('#myGauge');
myGauge.pointer.thickness = .15;
myGauge.thumbSize = 20;

선형 게이지는 섬(Thumb)을 사용하여 현재 값을 텍스트로 표시합니다. 이러한 경우 섬(Thumb)의 최소 크기는 포함된 텍스트 요소의 크기에 따라 결정됩니다. 기본적으로 섬(Thumb) 색상은 "포인터(pointer)" 색상으로 결정되지만, CSS를 사용하여 재정의할 수 있습니다.

니들 포인터(Needle Pointers) 사용자정의

기본적으로 Wijmo의 방사형 게이지는 색이 있는 구역와 텍스트 요소를 사용하여 게이지의 현재 값을 나타냅니다. 이렇게 하면 깨끗하고 읽기 쉬운 모양이 됩니다:

기존의 니들-스타일 포인터를 선호하는 경우, 컨트롤에 SVG 모양을 추가하고 변환을 적용하여 니들을 이동할 수 있습니다. 포인터는 SVG 경로에 불과하므로, 니들 요소와 연관된 경로 파라미터 및/또는 CSS를 변경하여 매우 쉽게 사용자 정의할 수 있습니다. refreshed 이벤트를 사용하여 포인터를 업데이트하실 수 있습니다.

다음 예시는 물방울 모양의 니들 포인터를 추가합니다:

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

// rounded needle pointer
new gauge.RadialGauge('#myGauge', {
    min: 0, max: 100, value: 25,
    showTicks: true,
    tickSpacing: 10,
    thickness: 0.1,
    showText: 'MinMax',
    isReadOnly: false,
    refreshed: updateNeedleRounded,
    valueChanged: updateNeedleRounded
});

다음 코드는 SVG 니들 요소를 만들고 업데이트합니다.

// update needle element when gauge size or value change
function updateNeedleRounded(sender) {

    // add needle element if necessary
    var needle = sender.hostElement.querySelector('.needle');
    if (!needle) {
        var svg = sender.hostElement.querySelector('svg');
        needle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        wijmo.addClass(needle, 'needle');
        svg.appendChild(needle);
    }

    // update needle parameters
    var args = getArgs(sender);
    needle.setAttribute('d', wijmo.format('M {lft} {y} A {wid} {wid} 0 0 0 {rgt} {y} L {x} {top} Z', args));
    needle.setAttribute('transform', wijmo.format('rotate({angle} {x} {y})', args));
}

// utilities
function getArgs(g) {
    var rc = g.clientSize,
        cx = rc.width / 2,
        cy = rc.height / 2,
        r = Math.min(rc.width, rc.height) / 2,
        wid = r / 10,
        pct = (g.max > g.min) ? (g.value - g.min) / (g.max - g.min) : 0,
        angle = g.startAngle + g.sweepAngle * wijmo.clamp(pct, 0, 1) - 90;

    return {
        angle: angle,
        x: cx.toFixed(4),
        y: cy.toFixed(4),
        wid: wid.toFixed(4),
        lft: (cx - wid).toFixed(4),
        rgt: (cx + wid).toFixed(4),
        top: (cy - r).toFixed(4),
        bot: (cy + wid).toFixed(4)
    }
}

삼각형 포인터(Triangle Pointer) 사용자 정의

기존의 니들 스타일 포인터는 좋지만, 게이지의 중앙 부분을 사용하여 일반적으로 게이지의 현재 값을 표시합니다.

니들 모양 대신 간단한 삼각형을 사용하여 이 문제를 해결할 수 있습니다:

다음은 삼각형 니들 포인터를 추가하는 예시입니다. 이전 예제와 동일하게 getArgs 메서드를 사용합니다.

// update needle element when gauge size or value change
// pointed (diamond-shaped) needle
function updateNeedle(sender) {

    // add needle element if necessary
    var needle = sender.hostElement.querySelector('.needle');
    if (!needle) {
        var svg = sender.hostElement.querySelector('svg');
        needle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        wijmo.addClass(needle, 'needle');
        svg.appendChild(needle);
    }

    // update needle parameters
    var args = getArgs(sender);
    needle.setAttribute('d', 
		wijmo.format('M {x} {y} l {szx} {sz} l 0 {msz2} Z', args)
	);
    needle.setAttribute('transform', wijmo.format('rotate({angle} {cx} {cy})', args));
}