Angular 방사형 게이지 개요
Angular 방사형 게이지 구성 요소는 미리 정의된 모양과 크기를 만들기 위해 바늘, 눈금, 범위 및 레이블과 같은 여러 시각적 요소를 제공합니다. IgxRadialGaugeComponent
는 애니메이션 전환에 대한 기본 제공 지원도 제공합니다. 이 애니메이션은 transitionDuration
속성을 설정하여 쉽게 사용자 정의할 수 있습니다.
Angular 방사형 게이지 예
다음 샘플은 동일한 IgxRadialGaugeComponent
에 여러 속성을 설정하여 이를 완전히 다른 방사형 게이지로 변환하는 방법을 보여줍니다.
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
import { IgxButtonModule } from "igniteui-angular" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule,
IgxButtonModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild } from "@angular/core" ;
import { SweepDirection } from "igniteui-angular-core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
import { IgxRadialGaugeRangeComponent } from "igniteui-angular-gauges" ;
import { RadialGaugeBackingShape } from "igniteui-angular-gauges" ;
import { RadialGaugeNeedleShape } from "igniteui-angular-gauges" ;
import { RadialGaugePivotShape } from "igniteui-angular-gauges" ;
import { RadialGaugeScaleOversweepShape } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements AfterViewInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
private shouldAnimate: boolean = false ;
public ngAfterViewInit(): void {
this .AnimateToGauge3();
}
public AnimateToGauge4(): void {
if (this .shouldAnimate){
this .radialGauge.transitionDuration = 500 ;
}
this .radialGauge.height = "330px" ;
this .radialGauge.width = "100%" ;
this .radialGauge.minimumValue = 0 ;
this .radialGauge.maximumValue = 80 ;
this .radialGauge.value = 10 ;
this .radialGauge.interval = 10 ;
this .radialGauge.labelExtent = 0.6 ;
this .radialGauge.labelInterval = 10 ;
this .radialGauge.font = "10px Verdana,Arial" ;
this .radialGauge.scaleStartAngle = 150 ;
this .radialGauge.scaleEndAngle = 30 ;
this .radialGauge.scaleBrush = "#0b8fed" ;
this .radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;
this .radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
this .radialGauge.scaleEndExtent = 0.825 ;
this .radialGauge.scaleStartExtent = 0.775 ;
this .radialGauge.minorTickStartExtent = 0.7 ;
this .radialGauge.minorTickEndExtent = 0.75 ;
this .radialGauge.tickStartExtent = 0.675 ;
this .radialGauge.tickEndExtent = 0.75 ;
this .radialGauge.backingShape = RadialGaugeBackingShape.Fitted;
this .radialGauge.backingBrush = "#fcfcfc" ;
this .radialGauge.backingOutline = "#d6d6d6" ;
this .radialGauge.backingOversweep = 5 ;
this .radialGauge.backingCornerRadius = 10 ;
this .radialGauge.backingOuterExtent = 0.9 ;
this .radialGauge.needleShape = RadialGaugeNeedleShape.NeedleWithBulb;
this .radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
this .radialGauge.needleEndExtent = 0.5 ;
this .radialGauge.needlePointFeatureExtent = 0.3 ;
this .radialGauge.needlePivotWidthRatio = 0.2 ;
this .radialGauge.needleBrush = "#9f9fa0" ;
this .radialGauge.needleOutline = "#9f9fa0" ;
this .radialGauge.needlePivotBrush = "#9f9fa0" ;
this .radialGauge.needlePivotOutline = "#9f9fa0" ;
this .radialGauge.tickBrush = "rgba(51, 51, 51, 1)" ;
this .radialGauge.minorTickBrush = "rgba(73, 73, 73, 1)" ;
this .radialGauge.minorTickCount = 6 ;
this .radialGauge.ranges.clear();
this .shouldAnimate = true ;
}
public AnimateToGauge3(): void {
if (this .shouldAnimate){
this .radialGauge.transitionDuration = 500 ;
}
this .radialGauge.height = "330px" ;
this .radialGauge.width = "100%" ;
this .radialGauge.minimumValue = 0 ;
this .radialGauge.maximumValue = 50 ;
this .radialGauge.value = 25 ;
this .radialGauge.interval = 5 ;
this .radialGauge.labelInterval = 5 ;
this .radialGauge.labelExtent = 0.71 ;
this .radialGauge.font = "10px Verdana,Arial" ;
this .radialGauge.isNeedleDraggingEnabled = true ;
this .radialGauge.needleEndExtent = 0.5 ;
this .radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
this .radialGauge.needleEndWidthRatio = 0.03 ;
this .radialGauge.needleStartWidthRatio = 0.05 ;
this .radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
this .radialGauge.needlePivotWidthRatio = 0.15 ;
this .radialGauge.needleBaseFeatureWidthRatio = 0.15 ;
this .radialGauge.needleBrush = "#79797a" ;
this .radialGauge.needleOutline = "#79797a" ;
this .radialGauge.needlePivotBrush = "#79797a" ;
this .radialGauge.needlePivotOutline = "#79797a" ;
this .radialGauge.minorTickCount = 4 ;
this .radialGauge.minorTickEndExtent = 0.625 ;
this .radialGauge.minorTickStartExtent = 0.6 ;
this .radialGauge.minorTickStrokeThickness = 1 ;
this .radialGauge.minorTickBrush = "#79797a" ;
this .radialGauge.tickStartExtent = 0.6 ;
this .radialGauge.tickEndExtent = 0.65 ;
this .radialGauge.tickStrokeThickness = 2 ;
this .radialGauge.tickBrush = "#79797a" ;
this .radialGauge.scaleStartAngle = 120 ;
this .radialGauge.scaleEndAngle = 60 ;
this .radialGauge.scaleBrush = "#d6d6d6" ;
this .radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted;
this .radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
this .radialGauge.scaleEndExtent = 0.57 ;
this .radialGauge.scaleStartExtent = 0.5 ;
this .radialGauge.backingBrush = "#fcfcfc" ;
this .radialGauge.backingOutline = "#d6d6d6" ;
this .radialGauge.backingStrokeThickness = 5 ;
this .radialGauge.backingShape = RadialGaugeBackingShape.Circular;
const range1 = new IgxRadialGaugeRangeComponent();
range1.startValue = 5 ;
range1.endValue = 15 ;
const range2 = new IgxRadialGaugeRangeComponent();
range2.startValue = 15 ;
range2.endValue = 35 ;
const range3 = new IgxRadialGaugeRangeComponent();
range3.startValue = 35 ;
range3.endValue = 45 ;
this .radialGauge.rangeBrushes = [ "#F86232" , "#DC3F76" , "#7446B9" ];
this .radialGauge.rangeOutlines = [ "#F86232" , "#DC3F76" , "#7446B9" ];
this .radialGauge.ranges.clear();
this .radialGauge.ranges.add(range1);
this .radialGauge.ranges.add(range2);
this .radialGauge.ranges.add(range3);
for (let i = 0 ; i < this .radialGauge.ranges.count; i++) {
const range = this .radialGauge.ranges.item(i);
range.innerStartExtent = 0.5 ;
range.innerEndExtent = 0.5 ;
range.outerStartExtent = 0.57 ;
range.outerEndExtent = 0.57 ;
}
this .shouldAnimate = true ;
}
public AnimateToGauge2(): void {
if (this .shouldAnimate){
this .radialGauge.transitionDuration = 500 ;
}
this .radialGauge.height = "330px" ;
this .radialGauge.width = "100%" ;
this .radialGauge.minimumValue = 100 ;
this .radialGauge.maximumValue = 200 ;
this .radialGauge.value = 125 ;
this .radialGauge.scaleStartAngle = 135 ;
this .radialGauge.scaleEndAngle = 45 ;
this .radialGauge.scaleBrush = "transparent" ;
this .radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
this .radialGauge.backingOutline = "white" ;
this .radialGauge.backingBrush = "white" ;
this .radialGauge.needleEndExtent = 0.8 ;
this .radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
this .radialGauge.needlePivotShape = RadialGaugePivotShape.Circle;
this .radialGauge.needlePivotWidthRatio = 0.1 ;
this .radialGauge.needleBrush = "#79797a" ;
this .radialGauge.needleOutline = "#79797a" ;
this .radialGauge.tickBrush = "transparent" ;
this .radialGauge.minorTickBrush = "transparent" ;
this .radialGauge.labelInterval = 100 ;
this .radialGauge.labelExtent = 1 ;
this .radialGauge.font = "15px Verdana,Arial" ;
const range1 = new IgxRadialGaugeRangeComponent();
range1.startValue = 100 ;
range1.endValue = 150 ;
const range2 = new IgxRadialGaugeRangeComponent();
range2.startValue = 150 ;
range2.endValue = 200 ;
this .radialGauge.rangeBrushes = [ "#32f845" , "#bf32f8" ];
this .radialGauge.rangeOutlines = [ "#32f845" , "#bf32f8" ];
this .radialGauge.ranges.clear();
this .radialGauge.ranges.add(range1);
this .radialGauge.ranges.add(range2);
for (let i = 0 ; i < this .radialGauge.ranges.count; i++) {
const range = this .radialGauge.ranges.item(i);
range.innerStartExtent = 0.3 ;
range.innerEndExtent = 0.3 ;
range.outerStartExtent = 0.9 ;
range.outerEndExtent = 0.9 ;
}
this .shouldAnimate = true ;
}
public AnimateToGauge1(): void {
if (this .shouldAnimate){
this .radialGauge.transitionDuration = 500 ;
}
this .radialGauge.height = "330px" ;
this .radialGauge.width = "100%" ;
this .radialGauge.minimumValue = 0 ;
this .radialGauge.maximumValue = 10 ;
this .radialGauge.value = 7.5 ;
this .radialGauge.scaleStartAngle = 200 ;
this .radialGauge.scaleEndAngle = -20 ;
this .radialGauge.scaleBrush = "transparent" ;
this .radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
this .radialGauge.backingOutline = "white" ;
this .radialGauge.backingBrush = "white" ;
this .radialGauge.needleEndExtent = 0.8 ;
this .radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
this .radialGauge.needlePivotShape = RadialGaugePivotShape.Circle;
this .radialGauge.needlePivotWidthRatio = 0.1 ;
this .radialGauge.needleBrush = "#79797a" ;
this .radialGauge.needleOutline = "#79797a" ;
this .radialGauge.tickBrush = "transparent" ;
this .radialGauge.minorTickBrush = "transparent" ;
this .radialGauge.labelInterval = 10 ;
this .radialGauge.labelExtent = 1 ;
this .radialGauge.font = "15px Verdana,Arial" ;
const range1 = new IgxRadialGaugeRangeComponent();
range1.startValue = 0 ;
range1.endValue = 5 ;
const range2 = new IgxRadialGaugeRangeComponent();
range2.startValue = 5 ;
range2.endValue = 10 ;
this .radialGauge.rangeBrushes = [ "#a4bd29" , "#F86232" ];
this .radialGauge.rangeOutlines = [ "#a4bd29" , "#F86232" ];
this .radialGauge.ranges.clear();
this .radialGauge.ranges.add(range1);
this .radialGauge.ranges.add(range2);
for (let i = 0 ; i < this .radialGauge.ranges.count; i++) {
const range = this .radialGauge.ranges.item(i);
range.innerStartExtent = 0.3 ;
range.innerEndExtent = 0.3 ;
range.outerStartExtent = 0.9 ;
range.outerEndExtent = 0.9 ;
}
this .shouldAnimate = true ;
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<button (click )="AnimateToGauge1()"
class ="options-button" > Animation #1</button >
<button (click )="AnimateToGauge2()"
class ="options-button" > Animation #2</button >
<button (click )="AnimateToGauge3()"
class ="options-button" > Animation #3</button >
<button (click )="AnimateToGauge4()"
class ="options-button" > Animation #4</button >
</div >
<div class ="container" >
<igx-radial-gauge
#radialGauge
height ="330px"
width ="100%"
value =25
interval =5
minimumValue =0
maximumValue =50
labelInterval =5
labelExtent =0.71
minorTickCount =4
minorTickEndExtent =.625
minorTickStartExtent =.6
minorTickStrokeThickness =1
minorTickBrush = "#79797a"
tickStartExtent =.6
tickEndExtent =.65
tickStrokeThickness =2
tickBrush = "#79797a"
needleShape ="Triangle"
needleEndWidthRatio =0.03
needleStartWidthRatio =0.05
needlePivotShape ="CircleOverlay"
needlePivotWidthRatio =0.15
needleBaseFeatureWidthRatio =0.15
needleBrush ="#79797a"
needleOutline ="#79797a"
needlePivotBrush ="#79797a"
needlePivotOutline ="#79797a"
isNeedleDraggingEnabled =true
backingBrush ="#fcfcfc"
backingOutline ="#d6d6d6"
backingStrokeThickness =5
scaleStartAngle =120
scaleEndAngle =60
scaleBrush ="#d6d6d6"
rangeBrushes ="#F86232, #DC3F76, #7446B9"
rangeOutlines ="#F86232, #DC3F76, #7446B9" >
</igx-radial-gauge >
</div >
</div >
html コピー
종속성
게이지 구성요소를 설치할 때 코어 패키지도 설치해야 합니다.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
cmd
컴포넌트 모듈
IgxRadialGaugeComponent
에는 다음 모듈이 필요합니다.
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges' ;
@NgModule ({
imports : [
IgxRadialGaugeModule
]
})
export class AppModule {}
ts
용법
다음 코드는 바늘과 눈금의 세 가지 비교 범위를 포함하는 방사형 게이지를 만드는 방법을 보여줍니다.
<igx-radial-gauge height ="400px" width ="400px"
value ="25"
interval ="5"
minimumValue ="0"
maximumValue ="100" >
<igx-radial-gauge-range startValue ="0"
endValue ="30"
brush ="red" >
</igx-radial-gauge-range >
<igx-radial-gauge-range startValue ="30"
endValue ="60"
brush ="yellow" >
</igx-radial-gauge-range >
<igx-radial-gauge-range startValue ="60"
endValue ="100"
brush ="green" >
</igx-radial-gauge-range >
</igx-radial-gauge >
html
역행
방사형 게이지 구성 요소는 방사형 게이지의 배경 역할을 하는 눈금 뒤에 그려진 뒷면 모양과 함께 제공됩니다.
뒷면 요소는 방사형 게이지 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 바늘, 레이블, 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.
뒷면은 원형이거나 장착될 수 있습니다. 원형 모양은 360도 원형 게이지를 생성하는 반면, 맞춤 모양은 scaleStartAngle
및 scaleEndAngle
속성을 둘러싸는 채워진 호 세그먼트를 생성합니다. 이는 backingShape
속성을 설정하여 설정할 수 있습니다.
<igx-radial-gauge
backingShape ="Fitted"
backingBrush ="#fcfcfc"
backingOutline ="DodgerBlue"
backingOversweep =5
backingCornerRadius =10
backingStrokeThickness =5
backingOuterExtent =0.8
backingInnerExtent =0.15
scaleStartAngle =135 scaleEndAngle =45
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge
backingShape ="Fitted"
backingBrush ="#fcfcfc"
backingOutline ="DodgerBlue"
backingOversweep =5
backingCornerRadius =10
backingStrokeThickness =5
backingOuterExtent =0.8
backingInnerExtent =0.15
scaleStartAngle =135
scaleEndAngle =45
scaleBrush ="#dddddd"
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
</div >
html コピー
규모
눈금은 minimumValue
및 maximumValue
값을 제공하여 생성할 수 있는 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 백킹과 함께 게이지의 전체적인 모양을 정의합니다. scaleStartAngle
및 scaleEndAngle
속성은 눈금의 호 경계를 정의합니다. 반면, scaleSweepDirection
속성은 눈금이 시계 방향 또는 시계 반대 방향으로 스윕할지 여부를 지정합니다. scaleBrush
, scaleStartExtent
및 scaleEndExtent
속성을 설정하여 배율의 모양을 사용자 정의할 수 있습니다.
<igx-radial-gauge
scaleStartAngle =135
scaleEndAngle =45
scaleBrush ="DodgerBlue"
scaleSweepDirection ="Clockwise"
scaleOversweep =1
scaleOversweepShape ="Fitted"
scaleStartExtent =0.45
scaleEndExtent =0.575
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge
scaleStartAngle =135
scaleEndAngle =45
scaleBrush ="DodgerBlue"
scaleSweepDirection ="Clockwise"
scaleOversweep =1
scaleOversweepShape ="Fitted"
scaleStartExtent =0.45
scaleEndExtent =0.575
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
</div >
html コピー
레이블과 제목
방사형 게이지 레이블은 minimumValue
과 maximumValue
속성 값 사이의 지정된 간격으로 숫자 값을 표시하는 시각적 요소입니다. labelExtent
속성을 분수로 설정하여 레이블 위치를 지정할 수 있습니다. 여기서 0은 게이지 중심을 나타내고 1은 게이지 뒷면의 외부 범위를 나타냅니다. 또한, fontBrush
및 font
과 같은 다양한 스타일 속성을 설정하여 레이블을 사용자 정의할 수 있습니다.
바늘에 대한 이러한 각 레이블에는 글꼴, 각도, 브러시 및 게이지 중심으로부터의 거리를 변경하는 데 적용할 수 있는 다양한 스타일 속성이 있습니다(예: titleExtent
, titleAngle
, SubtitleFontSize
,, highlightLabelBrush
).
<igx-radial-gauge
labelExtent =0.65
labelInterval =10
font ="11px Verdana"
fontBrush ="DodgerBlue"
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =100 interval =10 >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge
labelExtent =0.65
labelInterval =10
font ="11px Verdana"
fontBrush ="DodgerBlue"
titleDisplaysValue =true
subtitleText ="MPH"
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
</div >
html コピー
제목 & 부제목
titleText
속성을 subtitleText
사용할 수 있으며 둘 다 바늘에 대한 사용자 정의 텍스트를 표시하는 데 사용할 수 있습니다. 또는 and subtitleDisplaysValue
를 titleDisplaysValue
true로 설정하면 바늘의 값을 표시하고 and subtitleText
를 재정의 titleText
합니다. 따라서 제목에 대한 사용자 정의 텍스트를 사용할 수 있지만 자막을 통해 값을 표시하거나 그 반대의 경우도 마찬가지입니다.
아래 설명과 같이 강조 표시 바늘이 표시되면 다음을 통해 highlightLabelText
사용자 정의 텍스트를 표시할 수 있으며, 그렇지 않으면 highlightLabelDisplaysValue
활성화하고 해당 값을 표시할 수 있습니다.
<igx-radial-gauge
titleText ="Global Sales"
subtitleText ="2024" >
</igx-radial-gauge >
html
옵티컬 스케일링
방사형 게이지의 레이블과 제목은 배율을 변경할 수 있습니다. 이 기능을 사용하려면 먼저 true로 설정합니다 opticalScalingEnabled
. 그런 다음 레이블이 100% 광학 배율을 갖는 크기를 관리하는 항목을 설정할 opticalScalingSize
수 있습니다. 레이블은 게이지의 크기가 더 클 때 더 큰 글꼴을 갖습니다. 예를 들어, 이 속성이 500으로 설정되고 게이지 px 크기가 예를 들어 두 배가 되면 레이블의 글꼴 크기가 200% 더 커집니다. 1000.
EXAMPLE
app.module.ts
app.module.ts
app.component.ts
app.component.ts
app.component.html
app.component.html
app.component.scss
app.component.scss
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
public onOpticalScalingChanged = (e: any ) => {
const isEnabled = e.target.checked;
this .radialGauge.opticalScalingEnabled = isEnabled;
if (isEnabled) {
this .radialGauge.opticalScalingEnabled = true ;
}
else {
this .radialGauge.opticalScalingEnabled = false ;
}
}
public onGaugeSizeChanged = (e: any ) => {
let num: number = parseInt (e.target.value);
this .radialGauge.width = num.toString() + "%" ;
this .radialGauge.height = num.toString() + "%" ;
}
}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
public onOpticalScalingChanged = (e: any ) => {
const isEnabled = e.target.checked;
this .radialGauge.opticalScalingEnabled = isEnabled;
if (isEnabled) {
this .radialGauge.opticalScalingEnabled = true ;
}
else {
this .radialGauge.opticalScalingEnabled = false ;
}
}
public onGaugeSizeChanged = (e: any ) => {
let num: number = parseInt (e.target.value);
this .radialGauge.width = num.toString() + "%" ;
this .radialGauge.height = num.toString() + "%" ;
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<label class ="options-label" > Optical Scaling: </label >
<label class ="options-label" > <input type ="checkbox" id ="checkbox1" checked ="true" (change )="onOpticalScalingChanged($event)" /> Resize Gauge: </label >
<input class ="options-slider" id ="slider" type ="range" min ="20" max ="100" step ="10" value ="100" (input )="onGaugeSizeChanged($event)" />
</div >
<igx-radial-gauge #radialGauge
titleDisplaysValue ="true"
titleExtent ="0.5"
subtitleText ="MPH"
subtitleExtent ="0.65"
height ="100%" width ="100%%"
minimumValue =0 value =50
maximumValue =80 interval =10
opticalScalingEnabled ="true"
opticalScalingSize ="500" >
</igx-radial-gauge >
</div >
html コピー <div class ="container vertical" >
<div class ="options horizontal" >
<label class ="options-label" > Optical Scaling: </label >
<label class ="options-label" > <input type ="checkbox" id ="checkbox1" checked ="true" (change )="onOpticalScalingChanged($event)" /> Resize Gauge: </label >
<input class ="options-slider" id ="slider" type ="range" min ="20" max ="100" step ="10" value ="100" (input )="onGaugeSizeChanged($event)" />
</div >
<igx-radial-gauge #radialGauge
titleDisplaysValue ="true"
titleExtent ="0.5"
subtitleText ="MPH"
subtitleExtent ="0.65"
height ="100%" width ="100%%"
minimumValue =0 value =50
maximumValue =80 interval =10
opticalScalingEnabled ="true"
opticalScalingSize ="500" >
</igx-radial-gauge >
</div >
html コピー
눈금 표시
눈금 표시는 방사형 게이지의 중심에서 방사되는 가는 선입니다. 눈금 표시에는 메이저와 마이너의 두 가지 유형이 있습니다. 주요 눈금 표시는 minimumValue
속성과 maximumValue
속성 사이의 interval
으로 표시됩니다. 각 주요 눈금 사이에 표시되는 보조 눈금 수를 지정하려면 minorTickCount
속성을 사용하십시오. tickStartExtent
, tickEndExtent
, minorTickStartExtent
및 minorTickEndExtent
속성에 분수(0과 1 사이)를 설정하여 눈금 표시의 길이를 제어할 수 있습니다.
<igx-radial-gauge
tickStartExtent =0.45
tickEndExtent =0.575
tickStrokeThickness =2
tickBrush ="DodgerBlue"
minorTickCount =4
minorTickEndExtent =0.5
minorTickStartExtent =0.575
minorTickStrokeThickness =1
minorTickBrush ="DarkViolet"
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge
tickStartExtent =0.5
tickEndExtent =0.57
tickStrokeThickness =2
tickBrush ="DodgerBlue"
minorTickCount =4
minorTickEndExtent =0.520
minorTickStartExtent =0.57
minorTickStrokeThickness =1
minorTickBrush ="DarkViolet"
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10 >
</igx-radial-gauge >
</div >
html コピー
범위
범위는 지정된 minimumValue
및 maximumValue
속성으로 묶인 연속 값 집합을 강조표시합니다. 시작 및 끝 값을 지정하여 방사형 게이지에 여러 범위를 추가할 수 있습니다. 각 범위에는 brush
및 outline
과 같은 몇 가지 사용자 정의 속성이 있습니다. 또는 rangeBrushes
및 rangeOutlines
속성을 범위의 색상 목록으로 설정할 수 있습니다.
<igx-radial-gauge
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10
rangeBrushes ="red, yellow, green"
rangeOutlines ="red, yellow, green" >
<igx-radial-gauge-range
startValue =5 endValue =15 brush ="red" >
</igx-radial-gauge-range >
<igx-radial-gauge-range
startValue =15 endValue =35 brush ="yellow" >
</igx-radial-gauge-range >
<igx-radial-gauge-range
startValue =35 endValue =45 brush ="green" >
</igx-radial-gauge-range >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge
height ="300px" width ="300px"
minimumValue =0 value =50
maximumValue =80 interval =10
rangeBrushes ="#a4bd29, #F86232"
rangeOutlines ="#a4bd29, #F86232" >
<igx-radial-gauge-range
startValue =10 endValue =25
innerStartExtent =0.50 innerEndExtent =0.50
outerStartExtent =0.57 outerEndExtent =0.57 >
</igx-radial-gauge-range >
<igx-radial-gauge-range
startValue =25 endValue =40
innerStartExtent =0.50 innerEndExtent =0.50
outerStartExtent =0.57 outerEndExtent =0.57 >
</igx-radial-gauge-range >
</igx-radial-gauge >
</div >
html コピー
바늘
방사형 게이지 바늘은 게이지 설정 값을 나타내는 데 사용되는 시각적 요소입니다. 바늘은 미리 정의된 여러 모양 중 하나로 제공됩니다. 바늘은 게이지 중앙에 위치하는 피벗 모양을 가질 수 있습니다. 또한 피벗 모양은 미리 정의된 모양 중 하나를 사용합니다. 오버레이 또는 언더레이를 포함하는 피벗 모양에는 모양에 적용되는 별도의 피벗 브러시가 있을 수 있습니다.
지원되는 바늘 모양과 캡은 needleShape
및 needlePivotShape
속성을 사용하여 설정됩니다.
isNeedleDraggingEnabled
속성을 사용하여 게이지의 대화형 모드를 활성화할 수 있으며 최종 사용자는 minimumValue
과 maximumValue
속성 사이의 바늘을 끌어 값을 변경할 수 있습니다.
<igx-radial-gauge
value =50
isNeedleDraggingEnabled =true
isNeedleDraggingConstrained =true
needleShape ="NeedleWithBulb"
needleBrush ="DodgerBlue"
needleOutline ="DodgerBlue"
needleEndExtent =0.475
needleStrokeThickness =1
needlePivotShape ="CircleOverlay"
needlePivotBrush ="#9f9fa0"
needlePivotOutline ="#9f9fa0"
needlePivotWidthRatio =0.2
needlePivotStrokeThickness =1
height ="300px" width ="300px"
minimumValue =0
maximumValue =80 interval =10 >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge height ="300px" width ="300px"
isNeedleDraggingEnabled =true
isNeedleDraggingConstrained =true
needleShape ="NeedleWithBulb"
needleBrush ="DodgerBlue"
needleOutline ="DodgerBlue"
needleEndExtent =0.475
needleStrokeThickness =1
needlePivotShape ="CircleOverlay"
needlePivotBrush ="#9f9fa0"
needlePivotOutline ="#9f9fa0"
needlePivotWidthRatio =0.2
needlePivotStrokeThickness =1
value =50
minimumValue =0
maximumValue =80
interval =10 >
</igx-radial-gauge >
</div >
html コピー
하이라이트 바늘
방사형 게이지를 수정하여 두 번째 바늘을 표시할 수 있습니다. 이렇게 하면 주 바늘이 value
더 낮은 불투명도로 나타납니다. 이 기능을 사용하려면 먼저 오버레이로 설정한 highlightValueDisplayMode
다음 a highlightValue
를 적용합니다.
<igx-radial-gauge #radialGauge
labelExtent =0.65
labelInterval =10
highlightValueDisplayMode ="Overlay"
highlightValue =50
highlightLabelDisplaysValue =true
highlightLabelSnapsToNeedlePivot =true
isHighlightNeedleDraggingEnabled =true
height ="100%" width ="100%"
minimumValue =0 value =30
maximumValue =100 interval =10 >
</igx-radial-gauge >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxRadialGaugeModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxRadialGaugeModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { HighlightedValueDisplayMode } from "igniteui-angular-core" ;
import { IgxRadialGaugeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("radialGauge" , { static : true })
public radialGauge: IgxRadialGaugeComponent;
public ngOnInit(): void {
this .radialGauge.scaleBrush = "#e8e8e8" ;
}
}
ts コピー <div class ="container vertical" >
<igx-radial-gauge #radialGauge
labelExtent =0.65
labelInterval =10
highlightValueDisplayMode ="Overlay"
highlightValue =50
highlightLabelDisplaysValue =true
highlightLabelSnapsToNeedlePivot =true
isHighlightNeedleDraggingEnabled =true
height ="100%" width ="100%"
minimumValue =0 value =30
maximumValue =100 interval =10 >
</igx-radial-gauge >
</div >
html コピー
요약
편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 방사형 게이지를 볼 수 있습니다.
<igx-radial-gauge
height ="300px" width ="300px"
minimumValue =0
maximumValue =80
scaleStartAngle =135
scaleEndAngle =45
scaleBrush ="#c6c6c6"
scaleSweepDirection ="Clockwise"
scaleOversweep =1
scaleOversweepShape ="Fitted"
scaleStartExtent =0.45
scaleEndExtent =0.575
value =70
isNeedleDraggingEnabled =true
isNeedleDraggingConstrained =true
needleShape ="NeedleWithBulb"
needleBrush ="DodgerBlue"
needleOutline ="DodgerBlue"
needleEndExtent =0.475
needleStrokeThickness =1
needlePivotShape ="CircleOverlay"
needlePivotBrush ="#9f9fa0"
needlePivotOutline ="#9f9fa0"
needlePivotWidthRatio =0.2
needlePivotStrokeThickness =1
interval =10
tickStartExtent =0.45
tickEndExtent =0.575
tickStrokeThickness =2
tickBrush ="Black"
minorTickCount =4
minorTickEndExtent =0.5
minorTickStartExtent =0.575
minorTickStrokeThickness =1
minorTickBrush ="Black"
labelExtent =0.65
labelInterval =10
font ="11px Verdana"
fontBrush ="Black"
backingShape ="Fitted"
backingBrush ="#ededed"
backingOutline ="Gray"
backingOversweep =5
backingCornerRadius =10
backingStrokeThickness =5
backingOuterExtent =0.8
backingInnerExtent =0.15
rangeBrushes ="#a4bd29, #F86232"
rangeOutlines ="#a4bd29, #F86232" >
<igx-radial-gauge-range
startValue =20 endValue =40
innerStartExtent =0.45 innerEndExtent =0.45
outerStartExtent =0.57 outerEndExtent =0.57 >
</igx-radial-gauge-range >
<igx-radial-gauge-range
startValue =40 endValue =60
innerStartExtent =0.45 innerEndExtent =0.45
outerStartExtent =0.57 outerEndExtent =0.57 >
</igx-radial-gauge-range >
</igx-radial-gauge >
html
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
추가 리소스
다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.