Descripción general Medidor radial Angular
El componente Medidor radial Angular proporciona una serie de elementos visuales, como una aguja, marcas, rangos y etiquetas, para crear una forma y escala predefinidas. IgxRadialGaugeComponent
también tiene soporte integrado para transiciones animadas. Esta animación se puede personalizar fácilmente configurando la propiedad transitionDuration
.
Ejemplo Medidor radial Angular
El siguiente ejemplo demuestra cómo configurar varias propiedades en el mismo IgxRadialGaugeComponent
puede transformarlo en un calibre radial completamente diferente.
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 コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
dependencias
Al instalar el componente medidor, también se debe instalar el paquete central.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
cmd
Módulos de componentes
El IgxRadialGaugeComponent
requiere los siguientes módulos:
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges' ;
@NgModule ({
imports : [
IgxRadialGaugeModule
]
})
export class AppModule {}
ts
Uso
El siguiente código demuestra cómo crear un medidor radial que contiene una aguja y tres rangos comparativos en la escala.
<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
Apoyo
El componente de calibre radial viene con una forma de respaldo dibujada detrás de la escala que actúa como fondo para el calibre radial.
El elemento de respaldo representa el fondo y el borde del componente de calibre radial. Siempre es el primer elemento renderizado y el resto de elementos, como la aguja, las etiquetas y las marcas, se superponen encima.
El respaldo puede ser circular o empotrado. Una forma circular crea un indicador circular de 360 grados, mientras que una forma ajustada crea un segmento de arco relleno que abarca las propiedades scaleStartAngle
y scaleEndAngle
. Esto se puede configurar configurando la propiedad 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 コピー
Escala
La escala es un elemento visual que resalta la gama completa de valores en el indicador que se pueden crear proporcionando valores minimumValue
y maximumValue
. Junto con el respaldo, define la forma general del calibre. Las propiedades scaleStartAngle
y scaleEndAngle
definen los límites del arco de la escala. Mientras que la propiedad scaleSweepDirection
especifica si la escala barre en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. Puede personalizar la apariencia de la escala configurando las propiedades scaleBrush
, scaleStartExtent
y 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 コピー
Etiquetas y títulos
Las etiquetas de calibre radial son elementos visuales que muestran valores numéricos en un intervalo específico entre los valores de las propiedades minimumValue
y maximumValue
. Puede colocar etiquetas estableciendo la propiedad labelExtent
en una fracción, donde 0 representa el centro del calibre y 1 representa la extensión exterior del respaldo del calibre. Además, puede personalizar las etiquetas configurando varias propiedades de estilo, como fontBrush
y font
.
Cada una de estas etiquetas para la aguja tiene varios atributos de estilo que puede aplicar para cambiar la fuente, el ángulo, el pincel y la distancia desde el centro del medidor, como , 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 コピー
Título y subtítulo
titleText
y subtitleText
las propiedades están disponibles y se pueden usar para mostrar texto personalizado para la aguja. Alternativamente, y subtitleDisplaysValue
, titleDisplaysValue
cuando se establece en true, permitirá mostrar el valor de la aguja y anular titleText
y subtitleText
. Por lo tanto, puede ocupar texto personalizado para el título pero mostrar el valor a través del subtítulo y viceversa.
Si se muestra la aguja de resaltado, como se explica a continuación, el texto personalizado se puede mostrar a través highlightLabelText
de, de lo contrario highlightLabelDisplaysValue
, se puede habilitar y mostrar su valor.
<igx-radial-gauge
titleText ="Global Sales"
subtitleText ="2024" >
</igx-radial-gauge >
html
Escalado óptico
Las etiquetas y los títulos del medidor radial pueden cambiar su escala. Para habilitar esto, primero establézcalo opticalScalingEnabled
en true. A continuación, puede establecer opticalScalingSize
cuál administra el tamaño en el que las etiquetas tienen un escalado óptico del 100%. Las etiquetas tendrán fuentes más grandes cuando el tamaño del medidor sea mayor. Por ejemplo, las etiquetas tendrán un tamaño de fuente un 200% más grande cuando esta propiedad se establece en 500 y el tamaño del px del medidor se duplica a, por ejemplo. 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 コピー
Marcas de verificación
Las marcas de graduación son líneas finas que irradian desde el centro del calibre radial. Hay dos tipos de marcas: mayores y menores. Las marcas principales se muestran en el interval
entre las propiedades minimumValue
y maximumValue
. Utilice la propiedad minorTickCount
para especificar el número de marcas menores que se muestran entre cada marca mayor. Puede controlar la longitud de las marcas estableciendo una fracción (entre 0 y 1) en las propiedades tickStartExtent
, tickEndExtent
, minorTickStartExtent
y minorTickEndExtent
.
<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 コピー
Rangos
Un rango resalta un conjunto de valores continuos vinculados por propiedades minimumValue
y maximumValue
especificadas. Puede agregar varios rangos al calibre radial especificando sus valores inicial y final. Cada rango tiene algunas propiedades de personalización, como brush
y outline
. Alternativamente, puede configurar las propiedades rangeBrushes
y rangeOutlines
en una lista de colores para los rangos.
<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 コピー
Aguja
Las agujas de calibre radial son elementos visuales que se utilizan para indicar un valor establecido de calibre. Las agujas están disponibles en una de las varias formas predefinidas. La aguja puede tener forma de pivote, que se coloca en el centro del calibre. La forma de pivote también adopta una de las formas predefinidas. Las formas de pivote que incluyen una superposición o una base pueden tener un pincel de pivote independiente aplicado a la forma.
Las formas y tapas de agujas admitidas se configuran mediante las propiedades needleShape
y needlePivotShape
.
Puede habilitar un modo interactivo del medidor (usando la propiedad isNeedleDraggingEnabled
) y el usuario final podrá cambiar el valor arrastrando la aguja entre los valores de las propiedades de minimumValue
y 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 コピー
Aguja de resaltado
El calibre radial se puede modificar para mostrar una segunda aguja. Esto hará que la aguja value
principal aparezca con una opacidad más baja. Para habilitar esto, primero establezca highlightValueDisplayMode
en Superposición y, a continuación, aplique 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 コピー
Resumen
Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto y ver el medidor radial con todas las funciones y elementos visuales habilitados.
<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
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
Recursos adicionales
Puede encontrar más información sobre otros tipos de medidores en estos temas: