Web Components 방사형 게이지 개요

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

Web Components Radial Gauge Example

다음 샘플은 동일한 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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Dependencies

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

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

Component Modules

​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

Usage

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

  <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

Backing

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

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

뒷면은 원형이거나 장착될 수 있습니다. 원형 모양은 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

Scale

눈금은 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

Labels and Titles

방사형 게이지 레이블은 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

Title & Subtitle

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

Optical Scaling

방사형 게이지의 레이블과 제목은 배율을 변경할 수 있습니다. 이 기능을 사용하려면 먼저 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

Tick Marks

눈금 표시는 방사형 게이지의 중심에서 방사되는 가는 선입니다. 눈금 표시에는 메이저와 마이너의 두 가지 유형이 있습니다. 주요 눈금 표시는 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

Ranges

범위는 지정된 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

Needle

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

지원되는 바늘 모양과 캡은 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

Highlight Needle

방사형 게이지를 수정하여 두 번째 바늘을 표시할 수 있습니다. 이렇게 하면 주 바늘이 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

Summary

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

  <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 References

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

• IgcRadialGaugeComponent
• IgcRadialGaugeRangeComponent

Additional Resources

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

• 불릿 그래프
• 선형 계기