Web Components 방사형 게이지 개요

Web Components 방사형 게이지 구성 요소는 미리 정의된 모양과 눈금을 만들기 위해 바늘, 눈금 표시, 범위 및 레이블과 같은 다양한 시각적 요소를 제공합니다. IgcRadialGaugeComponent 또한 애니메이션 전환에 대한 지원이 내장되어 있습니다. 이 애니메이션은 속성을 설정하여 쉽게 사용자 지정할 수 있습니다 transitionDuration.

Web Components 방사형 게이지 예제

다음 샘플은 동일한 IgcRadialGaugeComponent에 여러 속성을 설정하여 이를 완전히 다른 방사형 게이지로 변환하는 방법을 보여줍니다.

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { RadialGaugeNeedleShape } from 'igniteui-webcomponents-gauges';
import { RadialGaugePivotShape } from 'igniteui-webcomponents-gauges';
import { RadialGaugeScaleOversweepShape } from 'igniteui-webcomponents-gauges';
import { SweepDirection } from 'igniteui-webcomponents-core';
import { RadialGaugeBackingShape } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeRangeComponent } from 'igniteui-webcomponents-gauges';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeAnimation {

    private gauge: IgcRadialGaugeComponent;
    private shouldAnimate: boolean = false;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;

        let button1 = document.getElementById('button1');
        button1!.addEventListener('click', this.onAnimateToGauge1)

        let button2 = document.getElementById('button2');
        button2!.addEventListener('click', this.onAnimateToGauge2)

        let button3 = document.getElementById('button3');
        button3!.addEventListener('click', this.onAnimateToGauge3)

        let button4 = document.getElementById('button4');
        button4!.addEventListener('click', this.onAnimateToGauge4)

        this.onAnimateToGauge4(this.gauge);
    }

    // full radial gauge
    public onAnimateToGauge4 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 50;
        this.gauge.value = 25;
        this.gauge.interval = 5;

        // setting appearance of labels
        this.gauge.labelInterval = 5;
        this.gauge.labelExtent = 0.71;
        this.gauge.font = '15px Verdana,Arial';

        // setting custom needle
        this.gauge.isNeedleDraggingEnabled = true;
        this.gauge.needleEndExtent = 0.5;
        this.gauge.needleShape = RadialGaugeNeedleShape.Triangle;
        this.gauge.needleEndWidthRatio = 0.03;
        this.gauge.needleStartWidthRatio = 0.05;
        this.gauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.gauge.needlePivotWidthRatio = 0.15;
        this.gauge.needleBaseFeatureWidthRatio = 0.15;
        this.gauge.needleBrush = '#79797a';
        this.gauge.needleOutline = '#79797a';
        this.gauge.needlePivotBrush = '#79797a';
        this.gauge.needlePivotOutline = '#79797a';

        // setting appearance of major/minor ticks
        this.gauge.minorTickCount = 4;
        this.gauge.minorTickEndExtent = 0.625;
        this.gauge.minorTickStartExtent = 0.6;
        this.gauge.minorTickStrokeThickness = 1;
        this.gauge.minorTickBrush = '#79797a';
        this.gauge.tickStartExtent = 0.6;
        this.gauge.tickEndExtent = 0.65;
        this.gauge.tickStrokeThickness = 2;
        this.gauge.tickBrush = '#79797a';

        // setting extent of gauge scale
        this.gauge.scaleStartAngle = 120;
        this.gauge.scaleEndAngle = 60;
        this.gauge.scaleBrush = '#d6d6d6';
        this.gauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted;
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;
        this.gauge.scaleEndExtent = 0.57;
        this.gauge.scaleStartExtent = 0.5;

        // setting appearance of backing dial
        this.gauge.backingBrush = '#fcfcfc';
        this.gauge.backingOutline = '#d6d6d6';
        this.gauge.backingStrokeThickness = 5;
        this.gauge.backingShape = RadialGaugeBackingShape.Circular;

        // setting custom gauge ranges
        const range1 = new IgcRadialGaugeRangeComponent();
        range1.startValue = 5;
        range1.endValue = 15;
        const range2 = new IgcRadialGaugeRangeComponent();
        range2.startValue = 15;
        range2.endValue = 35;
        const range3 = new IgcRadialGaugeRangeComponent();
        range3.startValue = 35;
        range3.endValue = 45;
        this.gauge.rangeBrushes  = [ '#F86232', '#DC3F76', '#7446B9'];
        this.gauge.rangeOutlines = [ '#F86232', '#DC3F76', '#7446B9'];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);
        this.gauge.ranges.add(range3);
        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.5;
            range.innerEndExtent = 0.5;
            range.outerStartExtent = 0.57;
            range.outerEndExtent = 0.57;
        }

        this.shouldAnimate = true;
    }

    // semi radial gauge
    public onAnimateToGauge3 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 80;
        this.gauge.value = 10;
        this.gauge.interval = 10;

        // Label Settings
        this.gauge.labelExtent = 0.6;
        this.gauge.labelInterval = 10;
        this.gauge.font = '15px Verdana,Arial';

        // Scale Settings
        this.gauge.scaleStartAngle = 135;
        this.gauge.scaleEndAngle = 45;
        this.gauge.scaleBrush = '#0b8fed';
        this.gauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;
        this.gauge.scaleEndExtent = 0.825;
        this.gauge.scaleStartExtent = 0.775;

        this.gauge.minorTickStartExtent = 0.7;
        this.gauge.minorTickEndExtent = 0.75;
        this.gauge.tickStartExtent = 0.675;
        this.gauge.tickEndExtent = 0.75;

        // Backing Settings
        this.gauge.backingShape = RadialGaugeBackingShape.Fitted;
        this.gauge.backingBrush = '#fcfcfc';
        this.gauge.backingOutline = '#d6d6d6';
        this.gauge.backingOversweep = 5;
        this.gauge.backingCornerRadius = 10;
        this.gauge.backingOuterExtent = 0.9;

        // Needle Settings
        this.gauge.needleShape = RadialGaugeNeedleShape.NeedleWithBulb;
        this.gauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.gauge.needleEndExtent = 0.5;
        this.gauge.needlePointFeatureExtent = 0.3;
        this.gauge.needlePivotWidthRatio = 0.2;
        this.gauge.needleBrush = '#9f9fa0';
        this.gauge.needleOutline = '#9f9fa0';
        this.gauge.needlePivotBrush = '#9f9fa0';
        this.gauge.needlePivotOutline = '#9f9fa0';

        // TickMark Settings
        this.gauge.tickBrush = 'rgba(51, 51, 51, 1)';
        this.gauge.minorTickBrush = 'rgba(73, 73, 73, 1)';
        this.gauge.minorTickCount = 6;

        this.gauge.ranges.clear();
        this.shouldAnimate = true;
    }

    // half radial gauge
    public onAnimateToGauge2 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 100;
        this.gauge.maximumValue = 200;
        this.gauge.value = 125;

        // Scale Settings
        this.gauge.scaleStartAngle = 180;
        this.gauge.scaleEndAngle = 0;
        this.gauge.scaleBrush = 'transparent';
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;

        // Backing Settings
        this.gauge.backingOutline = 'white';
        this.gauge.backingBrush = 'white';
        this.gauge.backingShape = RadialGaugeBackingShape.Fitted;

        // Needle Settings
        this.gauge.needleEndExtent = 0.8;
        this.gauge.needleShape = RadialGaugeNeedleShape.Triangle;
        this.gauge.needlePivotShape = RadialGaugePivotShape.Circle;
        this.gauge.needlePivotWidthRatio = 0.1;
        this.gauge.needleBrush = '#79797a';
        this.gauge.needleOutline = '#79797a';

        // TickMark Settings
        this.gauge.tickBrush = 'transparent';
        this.gauge.minorTickBrush = 'transparent';

        // Label Settings
        this.gauge.labelInterval = 50;
        this.gauge.labelExtent = 0.935;
        this.gauge.font = '13px Verdana,Arial';

        // setting custom gauge ranges
        const range1 = new IgcRadialGaugeRangeComponent();
        range1.startValue = 100;
        range1.endValue = 150;
        const range2 = new IgcRadialGaugeRangeComponent();
        range2.startValue = 150;
        range2.endValue = 200;

        this.gauge.rangeBrushes  = [ '#32f845', '#bf32f8' ];
        this.gauge.rangeOutlines = [ '#32f845', '#bf32f8' ];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.3;
            range.innerEndExtent = 0.3;
            range.outerStartExtent = 0.9;
            range.outerEndExtent = 0.9;
        }

        this.shouldAnimate = true;
    }

    // quatre radial gauge
    public onAnimateToGauge1 = (e: any) => {

        if(this.shouldAnimate){
            this.gauge.transitionDuration = 1000;
        }

        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 10;
        this.gauge.value = 7.5;

        // Scale Settings
        this.gauge.scaleStartAngle = 180;
        this.gauge.scaleEndAngle = 270;
        this.gauge.scaleBrush = 'transparent';
        this.gauge.scaleSweepDirection = SweepDirection.Clockwise;

        // Backing Settings
        this.gauge.backingOutline = 'white';
        this.gauge.backingBrush = 'white';
        this.gauge.backingShape = RadialGaugeBackingShape.Fitted;

        // Needle Settings
        this.gauge.needleEndExtent = 0.8;
        this.gauge.needleShape = RadialGaugeNeedleShape.Triangle;
        this.gauge.needlePivotShape = RadialGaugePivotShape.Circle;
        this.gauge.needlePivotWidthRatio = 0.1;
        this.gauge.needleBrush = '#79797a';
        this.gauge.needleOutline = '#79797a';

        // TickMark Settings
        this.gauge.tickBrush = 'transparent';
        this.gauge.minorTickBrush = 'transparent';

        // Label Settings
        this.gauge.labelInterval = 5;
        this.gauge.labelExtent = 0.915;
        this.gauge.font = '15px Verdana,Arial';

        // setting custom gauge ranges
        const range1 = new IgcRadialGaugeRangeComponent();
        range1.startValue = 0;
        range1.endValue = 5;
        const range2 = new IgcRadialGaugeRangeComponent();
        range2.startValue = 5;
        range2.endValue = 10;

        this.gauge.rangeBrushes  = [ '#a4bd29', '#F86232' ];
        this.gauge.rangeOutlines = [ '#a4bd29', '#F86232' ];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.3;
            range.innerEndExtent = 0.3;
            range.outerStartExtent = 0.9;
            range.outerEndExtent = 0.9;
        }

        this.shouldAnimate = true;
    }
}

new RadialGaugeAnimation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeAnimation</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class ="container sample center">
    <div class="options horizontal">
        <button id="button1" class="options-button">Gauge Animation #1</button>
        <button id="button2" class="options-button">Gauge Animation #2</button>
        <button id="button3" class="options-button">Gauge Animation #3</button>
        <button id="button4" class="options-button">Gauge Animation #4</button>
    </div>

    <igc-radial-gauge
        id="gauge"        
        height="calc(100% - 3.5rem)"
        width="100%"
        value="25"
        interval="5"
        minimum-value="0"
        maximum-value="50"
        label-interval="5"
        label-extent="0.71"
        minor-tickCount="4"
        minor-tick-end-extent=".625"
        minor-tick-start-extent=".6"
        minor-tick-stroke-thickness="1"
        minor-tick-brush = "#79797a"
        tick-start-extent=".6"
        tick-end-extent=".65"
        tick-stroke-thickness="2"
        tick-brush="#79797a"
        needle-shape="Triangle"
        needle-end-width-ratio="0.03"
        needle-start-width-ratio="0.05"
        needle-pivot-shape="CircleOverlay"
        needle-pivot-width-ratio="0.15"
        needle-base-feature-width-ratio="0.15"
        needle-brush="#79797a"
        needle-outline="#79797a"
        needle-pivot-brush="#79797a"
        needle-pivot-outline="#79797a"
        is-needle-dragging-enabled="true"
        backing-brush="#fcfcfc"
        backing-outline="#d6d6d6"
        backing-stroke-thickness="5"
        scale-start-angle="120"
        scale-end-angle="60"
        scale-brush="#d6d6d6"
        range-brushes="#F86232, #DC3F76, #7446B9"
        range-outlines="#F86232, #DC3F76, #7446B9" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

종속성

게이지 구성요소를 설치할 때 코어 패키지도 설치해야 합니다.

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges
cmd

컴포넌트 모듈

​IgcRadialGaugeComponent 에는 다음 모듈이 필요합니다.

// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// Radial Gauge Module
import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';

// register the modules
ModuleManager.register(
    IgcRadialGaugeModule
);
ts

용법

다음 코드는 바늘과 눈금의 세 가지 비교 범위를 포함하는 방사형 게이지를 만드는 방법을 보여줍니다.

  <igc-radial-gauge
    height="400px"
    width="400px"
    value="25"
    interval="5"
    minimum-value="0"
    maximum-value="100">
    <igc-radial-gauge-range
      start-value="0"
      end-value="30"
      brush="red">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="30"
      end-value="60"
      brush="yellow">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="60"
      end-value="100"
      brush="green">
    </igc-radial-gauge-range>
  </igc-radial-gauge>
html

역행

방사형 게이지 구성 요소는 방사형 게이지의 배경 역할을 하는 눈금 뒤에 그려진 뒷면 모양과 함께 제공됩니다.

뒷면 요소는 방사형 게이지 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 바늘, 레이블, 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.

뒷면은 원형이거나 장착될 수 있습니다. 원형 모양은 360도 원형 게이지를 생성하는 반면, 맞춤 모양은 scaleStartAngle 및 scaleEndAngle 속성을 둘러싸는 채워진 호 세그먼트를 생성합니다. 이는 backingShape 속성을 설정하여 설정할 수 있습니다.

  <igc-radial-gauge
    height="300px" width="300px"
    backing-shape="Fitted"
    backing-brush="#fcfcfc"
    backing-outline="DodgerBlue"
    backing-oversweep="5"
    backing-corner-radius="10"
    backing-stroke-thickness="5"
    backing-outer-extent="0.8"
    backing-inner-extent="0.15"
    scale-start-angle="135" scale-end-angle="45"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeBacking {

    constructor() {
    }

}

new RadialGaugeBacking();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeBacking</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        backing-shape="Fitted"
        backing-brush="#fcfcfc"
        backing-outline="DodgerBlue"
        backing-oversweep="5"
        backing-corner-radius="10"
        backing-stroke-thickness="5"
        backing-outer-extent="0.8"
        backing-inner-extent="0.15"

        scale-start-angle="135"
        scale-end-angle="45"
        scale-brush="#dddddd"

        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10" />

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

규모

눈금은 minimumValue 및 maximumValue 값을 제공하여 생성할 수 있는 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 백킹과 함께 게이지의 전체적인 모양을 정의합니다. scaleStartAngle 및 scaleEndAngle 속성은 눈금의 호 경계를 정의합니다. 반면, scaleSweepDirection 속성은 눈금이 시계 방향 또는 시계 반대 방향으로 스윕할지 여부를 지정합니다. scaleBrush, scaleStartExtent 및 scaleEndExtent 속성을 설정하여 배율의 모양을 사용자 정의할 수 있습니다.

  <igc-radial-gauge
    height="300px" width="300px"
    scale-start-angle="135"
    scale-end-angle="45"
    scale-brush="DodgerBlue"
    scale-sweep-direction="Clockwise"
    scale-oversweep="1"
    scale-oversweep-shape="Fitted"
    scale-start-extent="0.45"
    scale-end-extent="0.575"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeScale {

    constructor() {
    }

}

new RadialGaugeScale();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeScale</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        scale-start-angle="135"
        scale-end-angle="45"
        scale-brush="DodgerBlue"
        scale-sweep-direction="Clockwise"
        scale-oversweep="1"
        scale-oversweep-shape="Fitted"
        scale-start-extent="0.45"
        scale-end-extent="0.575"
        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

레이블과 제목

방사형 게이지 레이블은 minimumValue과 maximumValue 속성 값 사이의 지정된 간격으로 숫자 값을 표시하는 시각적 요소입니다. labelExtent 속성을 분수로 설정하여 레이블 위치를 지정할 수 있습니다. 여기서 0은 게이지 중심을 나타내고 1은 게이지 뒷면의 외부 범위를 나타냅니다. 또한, fontBrush 및 font과 같은 다양한 스타일 속성을 설정하여 레이블을 사용자 정의할 수 있습니다.

바늘에 대한 이러한 각 레이블에는 글꼴, 각도, 브러시 및 게이지 중심으로부터의 거리를 변경하는 데 적용할 수 있는 다양한 스타일 속성이 있습니다(예: titleExtent, titleAngle, SubtitleFontSize,, highlightLabelBrush).

  <igc-radial-gauge
    height="300px" width="300px"
    label-extent="0.65"
    label-interval="10"
    font="11px Verdana"
    font-brush="DodgerBlue"
    minimum-value="0" value="50"
    maximum-value="100" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeLabels {

    private gauge: IgcRadialGaugeComponent;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;
        this.gauge.font = '22px Verdana'
    }

}

new RadialGaugeLabels();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeLabels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        id="gauge"
        font-brush="DodgerBlue"
        font="20px Verdana"
        label-interval="10"
        label-extent="0.65"
        labels-pre-terminal="0"
        labels-post-initial="0"
        title-displays-value=true
        subtitle-text="MPH"
        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

제목 & 부제목

titleText 속성을 subtitleText 사용할 수 있으며 둘 다 바늘에 대한 사용자 정의 텍스트를 표시하는 데 사용할 수 있습니다. 또는 and subtitleDisplaysValue를 titleDisplaysValue true로 설정하면 바늘의 값을 표시하고 and subtitleText를 재정의 titleText 합니다. 따라서 제목에 대한 사용자 정의 텍스트를 사용할 수 있지만 자막을 통해 값을 표시하거나 그 반대의 경우도 마찬가지입니다.

아래 설명과 같이 강조 표시 바늘이 표시되면 다음을 통해 highlightLabelText 사용자 정의 텍스트를 표시할 수 있으며, 그렇지 않으면 highlightLabelDisplaysValue 활성화하고 해당 값을 표시할 수 있습니다.

<igc-radial-gauge
  title-text="Global Sales"
  subtitle-text="2024">
</igc-radial-gauge>
html

옵티컬 스케일링

방사형 게이지의 레이블과 제목은 배율을 변경할 수 있습니다. 이 기능을 사용하려면 먼저 true로 설정합니다 opticalScalingEnabled. 그런 다음 레이블이 100% 광학 배율을 갖는 크기를 관리하는 항목을 설정할 opticalScalingSize 수 있습니다. 레이블은 게이지의 크기가 더 클 때 더 큰 글꼴을 갖습니다. 예를 들어, 이 속성이 500으로 설정되고 게이지 px 크기가 예를 들어 두 배가 되면 레이블의 글꼴 크기가 200% 더 커집니다. 1000.

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeOpticalScaling {

    private gauge: IgcRadialGaugeComponent;

    constructor() {
        this.onGaugeSizeChanged = this.onGaugeSizeChanged.bind(this);

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;

        let checkbox1 = document.getElementById('checkbox1');
        checkbox1!.addEventListener('change', this.onOpticalScalingChanged);

        let slider1 = document.getElementById('slider') as HTMLInputElement;
        slider1!.addEventListener('change', this.onGaugeSizeChanged);
    }

    public onOpticalScalingChanged = (e: any) => {
        const isEnabled = e.target.checked;
        this.gauge.opticalScalingEnabled = isEnabled;

        if (isEnabled) {
            this.gauge.opticalScalingEnabled = true;
        }
        else {
            this.gauge.opticalScalingEnabled = false;
        }
    }

    public onGaugeSizeChanged = (e: any) => {

        let num: number = parseInt(e.target.value);
        this.gauge.width = num.toString() + "%";
        this.gauge.height = num.toString() + "%";
    }
}

new RadialGaugeOpticalScaling();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeOpticalScaling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
  <div class="options horizontal">
    <label class="options-label">Optical Scaling: </label>
    <label class="options-label"><input type="checkbox" id="checkbox1" checked="true"></input> Resize Gauge: </label>
    <input class="options-slider" id="slider" type="range" min="20" max="100" step="10" value="100"></input>

</div>

    <igc-radial-gauge
        id="gauge"
        height="100%"
        width="100%"
        title-displays-value="true"
        subtitle-text="MPH"       
        minimum-value="0" value="50"
        maximum-value="80" interval="10"
        title-extent="0.5"
        subtitle-extent="0.65"
        optical-scaling-enabled="true" 
        optical-scaling-size="500">
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

눈금 표시

눈금 표시는 방사형 게이지의 중심에서 방사되는 가는 선입니다. 눈금 표시에는 메이저와 마이너의 두 가지 유형이 있습니다. 주요 눈금 표시는 minimumValue 속성과 maximumValue 속성 사이의 interval으로 표시됩니다. 각 주요 눈금 사이에 표시되는 보조 눈금 수를 지정하려면 minorTickCount 속성을 사용하십시오. tickStartExtent, tickEndExtent, minorTickStartExtent 및 minorTickEndExtent 속성에 분수(0과 1 사이)를 설정하여 눈금 표시의 길이를 제어할 수 있습니다.

  <igc-radial-gauge
    height="300px" width="300px"
    tick-start-extent="0.45"
    tick-end-extent="0.575"
    tick-stroke-thickness="2"
    tick-brush="DodgerBlue"
    minor-tick-count="4"
    minor-tick-end-extent="0.5"
    minor-tick-start-extent="0.575"
    minor-tick-stroke-thickness="1"
    minor-tick-brush="DarkViolet"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeTickmarks {

    constructor() {
    }

}

new RadialGaugeTickmarks();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeTickmarks</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        id="gauge"
        height="100%"
        width="100%"
        minimum-vue="0" value="50"
        maximum-value="80" interval="10"
        tick-start-extent="0.5"
        tick-end-extent="0.57"
        tick-stroke-thickness="2"
        tick-brush="DodgerBlue"
        minor-tick-count="4"
        minor-tick-end-extent="0.520"
        minor-tick-start-extent="0.57"
        minor-tick-stroke-thickness="1"
        minor-tick-brush="DarkViolet" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

범위

범위는 지정된 minimumValue 및 maximumValue 속성으로 묶인 연속 값 집합을 강조표시합니다. 시작 및 끝 값을 지정하여 방사형 게이지에 여러 범위를 추가할 수 있습니다. 각 범위에는 brush 및 outline과 같은 몇 가지 사용자 정의 속성이 있습니다. 또는 rangeBrushes 및 rangeOutlines 속성을 범위의 색상 목록으로 설정할 수 있습니다.

  <igc-radial-gauge
    height="300px" width="300px"
    minimum-value="0" value="50"
    maximum-value="80" interval="10"
    range-brushes ="red, yellow, green"
    range-outlines="red, yellow, green">
    <igc-radial-gauge-range
        start-value="5"  end-value="15" brush="red">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="15"  end-value="35" brush="yellow">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="35"  end-value="45" brush="green">
    </igc-radial-gauge-range>
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeRanges {

    constructor() {
    }

}

new RadialGaugeRanges();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeRanges</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        height="100%"
        width="100%"
        minimum-value="0" value="50"
        maximum-value="80" interval="10"
        range-brushes ="#a4bd29, #F86232"
        range-outlines="#a4bd29, #F86232"  >
        <igc-radial-gauge-range name="range1"
            start-value="10" end-value="25"
            inner-start-extent="0.50" inner-end-extent="0.50"
            outer-start-extent="0.57" outer-end-extent="0.57" >
        </igc-radial-gauge-range>
        <igc-radial-gauge-range name="range2"
            start-value="25" end-value="40"
            inner-start-extent="0.50" inner-end-extent="0.50"
            outer-start-extent="0.57" outer-end-extent="0.57" >
        </igc-radial-gauge-range>
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

바늘

방사형 게이지 바늘은 게이지 설정 값을 나타내는 데 사용되는 시각적 요소입니다. 바늘은 미리 정의된 여러 모양 중 하나로 제공됩니다. 바늘은 게이지 중앙에 위치하는 피벗 모양을 가질 수 있습니다. 또한 피벗 모양은 미리 정의된 모양 중 하나를 사용합니다. 오버레이 또는 언더레이를 포함하는 피벗 모양에는 모양에 적용되는 별도의 피벗 브러시가 있을 수 있습니다.

지원되는 바늘 모양과 캡은 needleShape 및 needlePivotShape 속성을 사용하여 설정됩니다.

​isNeedleDraggingEnabled 속성을 사용하여 게이지의 대화형 모드를 활성화할 수 있으며 최종 사용자는 minimumValue과 maximumValue 속성 사이의 바늘을 끌어 값을 변경할 수 있습니다.

  <igc-radial-gauge
    height="300px" width="300px"
    is-needle-dragging-enabled="true"
    is-needle-dragging-constrained="true"
    needle-shape="NeedleWithBulb"
    needle-brush="DodgerBlue"
    needle-outline="DodgerBlue"
    needle-end-extent="0.475"
    needle-stroke-thickness="1"
    needle-pivot-shape="CircleOverlay"
    needle-pivot-brush="#9f9fa0"
    needle-pivot-outline="#9f9fa0"
    needle-pivot-width-ratio="0.2"
    needle-pivot-stroke-thickness="1"
    minimum-value="0" value="50"
    maximum-value="80" interval="10">
  </igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeNeedle {

    constructor() {
    }

}

new RadialGaugeNeedle();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeNeedle</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        height="100%"
        width="100%"
        is-needle-dragging-enabled="true"
        is-needle-dragging-constrained="true"
        needle-shape="NeedleWithBulb"
        needle-brush="DodgerBlue"
        needle-outline="DodgerBlue"
        needle-end-extent="0.475"
        needle-stroke-thickness="1"
        needle-pivot-shape="CircleOverlay"
        needle-pivot-brush="#9f9fa0"
        needle-pivot-outline="#9f9fa0"
        needle-pivot-width-ratio="0.2"
        needle-pivot-stroke-thickness="1"
        value="50"
        minimum-value="0"
        maximum=value="80"
        interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

하이라이트 바늘

방사형 게이지를 수정하여 두 번째 바늘을 표시할 수 있습니다. 이렇게 하면 주 바늘이 value 더 낮은 불투명도로 나타납니다. 이 기능을 사용하려면 먼저 오버레이로 설정한 highlightValueDisplayMode 다음 a highlightValue를 적용합니다.

<igc-radial-gauge
    id="gauge"
    highlight-value="50"
    highlight-value-display-mode="Overlay"
    highlight-label-displays-value="true"
    highlight-label-snaps-to-needle-pivot="true"
    is-highlight-needle-dragging-enabled="true"
    label-interval="10"
    label-extent="0.65"        
    height="100%"
    width="100%"
    minimum-value="0" value="30"
    maximum-value="100" interval="10">
</igc-radial-gauge>
html

EXAMPLE

TS

HTML

CSS

import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcRadialGaugeModule);

export class RadialGaugeHighlightNeedle {

    private gauge: IgcRadialGaugeComponent;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcRadialGaugeComponent;
        this.gauge.font = '22px Verdana'
    }

}

new RadialGaugeHighlightNeedle();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>RadialGaugeHighlightNeedle</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center">
    <igc-radial-gauge
        id="gauge"
        highlight-value="50"
        highlight-value-display-mode="Overlay"
        highlight-label-displays-value="true"
        highlight-label-snaps-to-needle-pivot="true"
        is-highlight-needle-dragging-enabled="true"
        label-interval="10"
        label-extent="0.65"        
        height="100%"
        width="100%"
        minimum-value="0" value="30"
        maximum-value="100" interval="10" >
    </igc-radial-gauge>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

요약

편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 방사형 게이지를 볼 수 있습니다.

  <igc-radial-gauge
    height="300px" width="300px"
    minimum-value="0"
    maximum-value="80"
    scale-start-angle="135"
    scale-end-angle="45"
    scale-brush="#c6c6c6"
    scale-sweep-direction="Clockwise"
    scale-oversweep="1"
    scale-oversweep-shape="Fitted"
    scale-start-extent="0.45"
    scale-end-extent="0.575"

    value="70"
    is-needle-dragging-enabled="true"
    is-needle-dragging-constrained="true"
    needle-shape="NeedleWithBulb"
    needle-brush="DodgerBlue"
    needle-outline="DodgerBlue"
    needle-end-extent="0.475"
    needle-stroke-thickness="1"
    needle-pivot-shape="CircleOverlay"
    needle-pivot-brush="#9f9fa0"
    needle-pivot-outline="#9f9fa0"
    needle-pivot-width-ratio="0.2"
    needle-pivot-stroke-thickness="1"

    interval="10"
    tick-start-extent="0.45"
    tick-end-extent="0.575"
    tick-stroke-thickness="2"
    tick-brush="Black"
    minor-tick-count="4"
    minor-tick-end-extent="0.5"
    minor-tick-start-extent="0.575"
    minor-tick-stroke-thickness="1"
    minor-tick-brush="Black"

    label-extent="0.65"
    label-interval="10"
    font="11px Verdana"
    font-brush="Black"

    backing-shape="Fitted"
    backing-brush="#ededed"
    backing-outline="Gray"
    backing-oversweep="5"
    backing-corner-radius="10"
    backing-stroke-thickness="5"
    backing-outer-extent="0.8"
    backing-inner-extent="0.15"

    range-brushes ="#a4bd29, #F86232"
    range-outlines="#a4bd29, #F86232">
    <igc-radial-gauge-range
      start-value="20" end-value="40"
      inner-start-extent="0.45" inner-end-extent="0.45"
      outer-start-extent="0.57" outer-end-extent="0.57">
    </igc-radial-gauge-range>
    <igc-radial-gauge-range
      start-value="40" end-value="60"
      inner-start-extent="0.45" inner-end-extent="0.45"
      outer-start-extent="0.57" outer-end-extent="0.57">
    </igc-radial-gauge-range>
  </igc-radial-gauge>
html

API 참조

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

• IgcRadialGaugeComponent
• IgcRadialGaugeRangeComponent

추가 리소스

다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.

• 불릿 그래프
• 선형 계기