Resumen de Angular Medidor lineal

The Ignite UI for Angular linear gauge component allows for visualizing data in the form of a linear gauge. The IgxLinearGaugeComponent provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.

Angular Linear Gauge Example

The following sample demonstrates how setting multiple properties on the same IgxLinearGaugeComponent can transform it to completely different linear gauge.

Dependencies

Al instalar el componente de calibre Angular, también se debe instalar el paquete principal.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges

Component Modules

RequiereIgxLinearGaugeComponent los siguientes módulos:

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

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

Usage

El siguiente código demuestra cómo crear un medidor lineal que contiene una aguja y tres rangos comparativos en la escala.

 <igx-linear-gauge width="700px"
                   height="30px"
                   minimumValue = "5"
                   maximumValue = "55"
                   value = "43">
    <igx-linear-graph-range startValue="0"
                            endValue="15"
                            brush="red">
    </igx-linear-graph-range>
    <igx-linear-graph-range startValue="15"
                            endValue="30"
                            brush="yellow">
    </igx-linear-graph-range>
    <igx-linear-graph-range startValue="30"
                            endValue="55"
                            brush="green">
    </igx-linear-graph-range>
 </igx-linear-gauge>

Needle

Esta es la medida principal que muestra el componente de calibre lineal y se visualiza como una barra o puede personalizarla para que muestre casi cualquier forma, como se muestra a continuación.

 <igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0
    maximumValue=100 interval=10
    value=50
    isNeedleDraggingEnabled=true
    needleShape="Custom"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleStrokeThickness=1
    needleBreadth=15
    needleInnerExtent=0.35
    needleOuterExtent=0.65
    needleOuterPointExtent=0.8
    needleInnerPointExtent=0.325
    needleInnerPointWidth=0
    needleOuterPointWidth=0.3
    needleInnerBaseWidth=0
    needleOuterBaseWidth=0.07>
</igx-linear-gauge>

Highlight Needle

The linear gauge can be modified to show a second needle. This will make the main needle's value appear with a lower opacity. To enable this first set highlightValueDisplayMode to Overlay and then apply a highlightValue.

<igx-linear-gauge
    #linearGauge
    height="80px"
    width="400px"
    value=70
    minimumValue=0
    maximumValue=100
    interval=10
    labelInterval=10
    labelExtent=0.025
    labelsPreTerminal=0
    labelsPostInitial=0
    needleBrush="Blue"
    highlightValueDisplayMode="Overlay"
    highlightValue=25
    isHighlightNeedleDraggingEnabled=true>
</igx-linear-gauge>

Ranges

Los rangos son elementos visuales que resaltan un rango específico de valores en una escala. Su propósito es comunicar visualmente el estado cualitativo de la barra de medición de desempeño, ilustrando al mismo tiempo el grado en que se encuentra dentro de ese estado.

<igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0 value=50
    maximumValue=100 interval=10
    rangeBrushes="#a4bd29, #F86232"
    rangeOutlines="#a4bd29, #F86232" >
    <igx-linear-graph-range
        startValue=0 endValue=50
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.25 outerEndExtent=0.4>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=50 endValue=100
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.4 outerEndExtent=0.55>
    </igx-linear-graph-range>
</igx-linear-gauge>

Tick Marks

Las marcas sirven como división visual de la escala en intervalos para aumentar la legibilidad del calibre lineal.

Marcas de graduación principales: las marcas de graduación principales se utilizan como delimitadores principales en la escala. La frecuencia con la que aparecen, su extensión y estilo se pueden controlar estableciendo sus propiedades correspondientes.

Marcas de graduación menores: las marcas de graduación menores representan marcas de graduación auxiliares, que pueden usarse para mejorar aún más la legibilidad de la escala y se pueden personalizar de manera similar a las principales.

<igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0 value=50
    maximumValue=100
    interval=10
    tickBrush="DodgerBlue"
    ticksPreTerminal=0
    ticksPostInitial=0
    tickStrokeThickness=2
    tickStartExtent=0.25
    tickEndExtent=0.05
    minorTickCount=4
    minorTickBrush="DarkViolet"
    minorTickEndExtent=0.05
    minorTickStartExtent=0.15
    minorTickStrokeThickness=1>
</igx-linear-gauge>

Labels

Las etiquetas indican las medidas de la báscula.

<igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0 value=50
    maximumValue=100 interval=10
    labelInterval=10
    labelExtent=0.025
    labelsPreTerminal=0
    labelsPostInitial=0
    fontBrush="DodgerBlue"
    font="11px Verdana">
</igx-linear-gauge>

Backing

El elemento de respaldo representa el fondo y el borde del componente de calibre lineal. Siempre es el primer elemento representado y el resto de elementos, como etiquetas y marcas, se superponen encima.

<igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0 value=50
    maximumValue=100 interval=10
    backingBrush="#bddcfc"
    backingOutline="DodgerBlue"
    backingStrokeThickness=4
    backingInnerExtent=0
    backingOuterExtent=1>
</igx-linear-gauge>

Scale

The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using isScaleInverted property) and all labels will be rendered from right-to-left instead of left-to-right.

<igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0 value=50
    maximumValue=100 interval=10
    isScaleInverted=false
    scaleBrush="DodgerBlue"
    scaleOutline="DarkViolet"
    scaleStrokeThickness=1
    scaleInnerExtent=0.05
    scaleOuterExtent=0.65
    scaleStartExtent=0.05
    scaleEndExtent=0.95>
</igx-linear-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 lineal con todas las funciones y elementos visuales habilitados.

<igx-linear-gauge
    height="80px" width="400px"
    minimumValue=0
    maximumValue=100

    labelInterval=10
    labelExtent=0.025
    labelsPreTerminal=0
    labelsPostInitial=0
    fontBrush="Black"
    font="11px Verdana"

    interval=10
    tickBrush="Black"
    ticksPreTerminal=0
    ticksPostInitial=0
    tickStrokeThickness=2
    tickStartExtent=0.25
    tickEndExtent=0.05

    minorTickCount=4
    minorTickBrush="Black"
    minorTickEndExtent=0.05
    minorTickStartExtent=0.15
    minorTickStrokeThickness=1

    value=50
    isNeedleDraggingEnabled=true
    needleShape="Custom"
    needleBrush="Black"
    needleOutline="Black"
    needleStrokeThickness=1
    needleBreadth=15
    needleInnerExtent=0.35
    needleOuterExtent=0.65
    needleOuterPointExtent=0.8
    needleInnerPointExtent=0.325
    needleInnerPointWidth=0
    needleOuterPointWidth=0.3
    needleInnerBaseWidth=0
    needleOuterBaseWidth=0.07

    isScaleInverted=false
    scaleBrush="Gray"
    scaleOutline="Gray"
    scaleStrokeThickness=1
    scaleInnerExtent=0.05
    scaleOuterExtent=0.65
    scaleStartExtent=0.05
    scaleEndExtent=0.95

    backingBrush="#cecece"
    backingOutline="#cecece"
    backingStrokeThickness=4
    backingInnerExtent=0
    backingOuterExtent=1

    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <igx-linear-graph-range
        startValue=0 endValue=50
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.25 outerEndExtent=0.4>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=50 endValue=100
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.4 outerEndExtent=0.55>
    </igx-linear-graph-range>
</igx-linear-gauge>

API References

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

• IgxLinearGaugeComponent
• IgxLinearGraphRangeComponent

Additional Resources

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

• Gráfico de viñetas
• Medidor radial