Descripción general Medidor radial Angular

The Angular radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. The IgxRadialGaugeComponent also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property.

Angular Radial Gauge Example

El siguiente ejemplo demuestra cómo al establecer múltiples propiedades en la mismaIgxRadialGaugeComponent puede transformarla en una muestra radial completamente diferente.

Dependencies

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

Component Modules

RequiereIgxRadialGaugeComponent los siguientes módulos:

// app.module.ts
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';

@NgModule({
    imports: [
        // ...
        IgxRadialGaugeModule
        // ...
    ]
})
export class AppModule {}

Usage

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>

Backing

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 ajustado. Una forma circular crea un calibre circular de 360 grados, mientras que una forma ajustada crea un segmento de arco relleno que abarca lasscaleStartAngle propiedades y (yscaleEndAngle). Esto se puede establecer estableciendo labackingShape propiedad.

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

Scale

La escala es un elemento visual que resalta todo el rango de valores en el medidor que se pueden crear mediante la introducciónminimumValue de valores ymaximumValue. Junto con el respaldo, define la forma general del calibre. LasscaleStartAngle propiedades yscaleEndAngle definen los límites del arco de la escala. Mientras que lascaleSweepDirection propiedad especifica si la escala se desplaza en sentido horario o antihorario. Puedes personalizar la apariencia de la escala ajustandoscaleBrushscaleStartExtent yscaleEndExtent las propiedades.

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

Labels and Titles

Las etiquetas radiales de calibre son elementos visuales que muestran valores numéricos en un intervalo especificado entre los valores de lasminimumValue propiedades de ymaximumValue. Puedes posicionar las etiquetas estableciendo lalabelExtent propiedad en una fracción, donde 0 representa el centro de calibre y 1 representa la extensión exterior del respaldo de calibre. Además, puedes personalizar etiquetas y establecer varias propiedades de estilo comofontBrush yfont.

Cada una de estas etiquetas para la aguja tiene varios atributos de estilo que puedes aplicar para cambiar la fuente, el ángulo, el pincel y la distancia respecto al centro del calibre, comotitleExtent,titleAngleSubtitleFontSize,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>

Title & Subtitle

titleTextysubtitleText existen propiedades disponibles, que pueden usarse para mostrar texto personalizado para la aguja. Alternativamente,titleDisplaysValue ysubtitleDisplaysValue, cuando se configura como verdadero, permitirá mostrar el valor de la aguja y anulartitleText ysubtitleText. Así que puedes 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 más abajo, entonces se puede mostrar texto personalizado a travéshighlightLabelText de ella, de lo contrariohighlightLabelDisplaysValue activarse y mostrar su valor.

<igx-radial-gauge
    titleText="Global Sales"
    subtitleText="2024">
</igx-radial-gauge>

Optical Scaling

Las etiquetas y títulos del medidor radial pueden cambiar su escala. Para habilitar esto, primero se poneopticalScalingEnabled en verdadero. Luego puedes estableceropticalScalingSize cuál gestiona 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 calibre sea mayor. Por ejemplo, las etiquetas tendrán un tamaño de fuente un 200% mayor cuando esta propiedad está configurada a 500 y el tamaño gauge px se duplica a por ejemplo. 1000.

Tick Marks

Las marcas de marca son líneas finas que irradian desde el centro del manómetro radial. Existen dos tipos de marcas: mayores y menores. Las principales marcas de verificación se muestran en lasinterval propiedades entre yminimumValuemaximumValue y . Utiliza laminorTickCount propiedad para especificar el número de marcas menores que se muestran entre cada marca principal. Puedes controlar la longitud de las marcas de verificación estableciendo una fracción (entre 0 y 1) atickStartExtent,tickEndExtent,minorTickStartExtent, yminorTickEndExtent propiedades.

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

Ranges

Un rango resalta un conjunto de valores continuos limitados por propiedades yminimumValue especificadasmaximumValue. Puedes añadir varios rangos al medidor radial especificando sus valores iniciales y finales. Cada gama tiene algunas propiedades de personalización comobrush youtline. Alternativamente, puedes establecerrangeBrushes yrangeOutlines propiedades 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>

Needle

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 las agujas soportadas se fijan usando lasneedleShape propiedades yneedlePivotShape.

Puedes activar un modo interactivo del medidor (usandoisNeedleDraggingEnabled propiedades) y el usuario final podrá cambiar el valor arrastrando la aguja entre los valores deminimumValue ymaximumValue propiedades.

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

Highlight Needle

El medidor radial puede modificarse para mostrar una segunda aguja. Esto hará que las agujasvalue principales tengan una opacidad menor. Para habilitar esto, primero configurahighlightValueDisplayMode Superposición y luego aplica unhighlightValue.

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

Summary

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>

API References

La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

Additional Resources

Puede encontrar más información sobre otros tipos de medidores en estos temas: