Resumen de React Medidor lineal

    El componente de medidor lineal Ignite UI for React permite visualizar datos en forma de medidor lineal. Proporciona IgrLinearGauge una vista simple y concisa de un valor comparado con una escala y uno o más rangos. Admite una escala, un conjunto de marcas de verificación y un conjunto de etiquetas. El componente también tiene un soporte incorporado para transiciones animadas. Esta animación es fácilmente personalizable configurando la transitionDuration propiedad. Las características del componente de calibre lineal incluyen orientación y dirección configurables, elementos visuales configurables como la aguja, y más.

    React Linear Gauge Example

    El siguiente ejemplo demuestra cómo configurar varias propiedades en el mismo IgrLinearGauge puede transformarlo en un calibre lineal completamente diferente.

    EXAMPLE
    TSX
    Edit in:

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

    Dependencies

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

    npm install --save igniteui-react-core
npm install --save igniteui-react-gauges
cmd
    Ignite UI for React | CTA Banner

    Component Modules

    El IgrLinearGauge requiere los siguientes módulos:

    import { IgrLinearGaugeModule } from 'igniteui-react-gauges';

IgrLinearGaugeModule.register();
ts

    Usage

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

     <IgrLinearGauge width="700px"
                   height="30px"
                   minimumValue = {5}
                   maximumValue = {55}
                   value = {43}>
    <IgrLinearGraphRange startValue={0}
                            endValue={15}
                            brush="red"/>
    <IgrLinearGraphRange startValue={15}
                            endValue={30}
                            brush="yellow"/>
    <IgrLinearGraphRange startValue={30}
                            endValue={55}
                            brush="green"/>
 </IgrLinearGauge>
tsx

    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.

     <IgrLinearGauge
    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} />
tsx

    EXAMPLE
    TSX
    Edit in:

    Highlight Needle

    El calibre lineal 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.

    <IgrLinearGauge
    height="80px"
    width="100%"
    value={75}
    minimumValue={0} 
    maximumValue={100} 
    interval={10}
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    needleBrush='blue'
    highlightValueDisplayMode="Overlay"
    highlightValue={25} 
    isHighlightNeedleDraggingEnabled={true}
    />
tsx

    EXAMPLE
    TSX
    Edit in:

    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.

    <IgrLinearGauge
    height="80px" width="400px"
    minimumValue={0} value={50}
    maximumValue={100} interval={10}
    rangeBrushes="#a4bd29, #F86232"
    rangeOutlines="#a4bd29, #F86232" >
    <IgrLinearGraphRange
        startValue={0} endValue={50}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.25} outerEndExtent={0.4} />
    <IgrLinearGraphRange
        startValue={50} endValue={100}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.4} outerEndExtent={0.55} />
</IgrLinearGauge>
tsx

    EXAMPLE
    TSX
    Edit in:

    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.

    <IgrLinearGauge
    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} />
tsx

    EXAMPLE
    TSX
    Edit in:

    Labels

    Las etiquetas indican las medidas de la báscula.

    <IgrLinearGauge
    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" />
tsx

    EXAMPLE
    TSX
    Edit in:

    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.

    <IgrLinearGauge
    height="80px" width="400px"
    minimumValue={0} value={50}
    maximumValue={100} interval={10}
    backingBrush="#bddcfc"
    backingOutline="DodgerBlue"
    backingStrokeThickness={4}
    backingInnerExtent={0}
    backingOuterExtent={1} />
tsx

    EXAMPLE
    TSX
    Edit in:

    Scale

    La escala es un elemento visual que resalta toda la gama de valores del calibre lineal. Puedes personalizar la apariencia y la forma de la escala. También se puede invertir (usando la propiedad isScaleInverted) y todas las etiquetas se representarán de derecha a izquierda en lugar de de izquierda a derecha.

    <IgrLinearGauge
    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} />
tsx

    EXAMPLE
    TSX
    Edit in:

    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.

    <IgrLinearGauge
    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">
    <IgrLinearGraphRange
        startValue={0} endValue={50}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.25} outerEndExtent={0.4} />
    <IgrLinearGraphRange
        startValue={50} endValue={100}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.4} outerEndExtent={0.55} />
</IgrLinearGauge>
tsx

    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: