Resumen de React Medidor radial

The React 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 IgrRadialGauge also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property.

React Radial Gauge Example

El siguiente ejemplo demuestra cómo al establecer múltiples propiedades en la mismaIgrRadialGauge 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-react-core
npm install --save igniteui-react-gauges

Component Modules

RequiereIgrRadialGauge los siguientes módulos:

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

IgrRadialGaugeModule.register();

Usage

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

 <IgrRadialGauge height="400px" width="400px"
    value={25}
    interval={5}
    minimumValue={0}
    maximumValue={100}>
    <IgrRadialGaugeRange startValue={0}
                         endValue={30}
                         brush="red"/>
    <IgrRadialGaugeRange startValue={30}
                         endValue={60}
                         brush="yellow"/>
    <IgrRadialGaugeRange startValue={60}
                         endValue={100}
                         brush="green"/>
</IgrRadialGauge>

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.

<IgrRadialGauge
    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} />

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.

<IgrRadialGauge
    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} />

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

<IgrRadialGauge
    labelExtent={0.65}
    labelInterval={10}
    font="11px Verdana"
    fontBrush="DodgerBlue"
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />

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.

<IgrRadialGauge
    titleText="Global Sales"
    subtitleText="2024"
/>

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.

<IgrRadialGauge
    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}/>

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.

<IgrRadialGauge
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10}
    rangeBrushes ="red, yellow, green"
    rangeOutlines="red, yellow, green">
   <IgrRadialGaugeRange
       startValue={1}  endValue={10} brush="yellow" />
   <IgrRadialGaugeRange
       startValue={10}  endValue={25} brush="green" />
   <IgrRadialGaugeRange
       startValue={25}  endValue={40} brush="red" />
    <IgrRadialGaugeRange
       startValue={40}  endValue={80} brush="yellow" />
</IgrRadialGauge>

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.

<IgrRadialGauge
    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} />

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.

<IgrRadialGauge
    highlightValueDisplayMode="Overlay"
    highlightValue="25"
    isHighlightNeedleDraggingEnabled="true"
    isNeedleDraggingEnabled="true"
    titleDisplaysValue="true"
    label-interval="10"
    label-extent="0.65"
    height="100%"
    width="100%"
    minimumValue={0} value={75}
    maximumValue={80} interval={10}  />

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.

<IgrRadialGauge
    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">
    <IgrRadialGaugeRange
        startValue={20} endValue={40}
        innerStartExtent={0.45} innerEndExtent={0.45}
        outerStartExtent={0.57} outerEndExtent={0.57} />
    <IgrRadialGaugeRange
        startValue={40} endValue={60}
        innerStartExtent={0.45} innerEndExtent={0.45}
        outerStartExtent={0.57} outerEndExtent={0.57} />
</IgrRadialGauge>

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: