Visão geral do medidor radial Angular

O componente Angular radial gauge fornece uma série de elementos visuais, como uma agulha, marcas de escala, intervalos e rótulos, para criar uma forma e escala predefinidas. O IgxRadialGaugeComponent também tem suporte integrado para transições animadas. Essa animação é facilmente personalizável ao definir a propriedade transitionDuration.

Angular Radial Gauge Example

O exemplo a seguir demonstra como definir várias propriedades no mesmo IgxRadialGaugeComponent pode transformá-lo em um calibre radial completamente diferente.

Dependencies

Ao instalar o componente do medidor, o pacote principal também deve ser instalado.

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

Component Modules

O IgxRadialGaugeComponent requer os seguintes módulos:

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

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

Usage

O código a seguir demonstra como criar um medidor radial contendo uma agulha e três faixas comparativas na 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

O componente do medidor radial vem com um formato de apoio desenhado atrás da escala que atua como um plano de fundo para o medidor radial.

O elemento de apoio representa o fundo e a borda do componente de calibre radial. Ele é sempre o primeiro elemento renderizado e todos os outros elementos, como agulha, rótulos e marcas de escala, são sobrepostos em cima dele.

O suporte pode ser circular ou ajustado. Uma forma circular cria um medidor de círculo de 360 graus, enquanto uma forma ajustada cria um segmento de arco preenchido que abrange as propriedades scaleStartAngle e scaleEndAngle. Isso pode ser definido definindo a propriedade 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>

Scale

A escala é um elemento visual que destaca a gama completa de valores no medidor que pode ser criada fornecendo valores minimumValue e maximumValue. Junto com o suporte, ele define a forma geral do medidor. As propriedades scaleStartAngle e scaleEndAngle definem os limites do arco da escala. Enquanto isso, a propriedade scaleSweepDirection especifica se a escala varre no sentido horário ou anti-horário. Você pode personalizar a aparência da escala definindo as propriedades scaleBrush, scaleStartExtent e 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>

Labels and Titles

Os rótulos de calibre radial são elementos visuais que exibem valores numéricos em um intervalo especificado entre valores das propriedades minimumValue e maximumValue. Você pode posicionar rótulos definindo a propriedade labelExtent como uma fração, onde 0 representa o centro do calibre e 1 representa a extensão externa do suporte do calibre. Além disso, você pode personalizar rótulos definindo várias propriedades de estilo, como fontBrush e font.

Cada um desses rótulos para a agulha tem vários atributos de estilo que você pode aplicar para alterar a fonte, o ângulo, o pincel e a distância do centro do 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>

Title & Subtitle

As propriedades titleText e subtitleText estão disponíveis e podem ser usadas para exibir texto personalizado para a agulha. Como alternativa, titleDisplaysValue e subtitleDisplaysValue, quando definidos como true, permitirão exibir o valor da agulha e substituir titleText e subtitleText. Portanto, você pode ocupar texto personalizado para o título, mas mostrar o valor por meio do subtítulo e vice-versa.

Se a agulha de destaque for exibida, conforme explicado abaixo, o texto personalizado poderá ser exibido via highlightLabelText, caso contrário, highlightLabelDisplaysValue poderá ser habilitado e exibir seu valor.

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

Optical Scaling

Os rótulos e títulos do medidor radial podem alterar sua escala. Para habilitar isso, primeiro defina opticalScalingEnabled como true. Então você pode definir opticalScalingSize que gerencia o tamanho no qual os rótulos têm escala óptica de 100%. Os rótulos terão fontes maiores quando o tamanho do medidor for maior. Por exemplo, os rótulos terão um tamanho de fonte 200% maior quando esta propriedade for definida como 500 e o tamanho px do medidor for dobrado para, por exemplo, 1000.

Tick Marks

Marcas de escala são linhas finas que irradiam do centro do medidor radial. Existem dois tipos de marcas de escala: principais e secundárias. Marcas de escala principais são exibidas no interval entre as propriedades minimumValue e maximumValue. Use a propriedade minorTickCount para especificar o número de marcas de escala secundárias exibidas entre cada marca de escala principal. Você pode controlar o comprimento das marcas de escala definindo uma fração (entre 0 e 1) para as propriedades tickStartExtent, tickEndExtent, minorTickStartExtent e 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>

Ranges

Um intervalo destaca um conjunto de valores contínuos vinculados por propriedades minimumValue e maximumValue especificadas. Você pode adicionar vários intervalos ao medidor radial especificando seus valores inicial e final. Cada intervalo tem algumas propriedades de personalização, como brush e outline. Como alternativa, você pode definir as propriedades rangeBrushes e rangeOutlines para uma lista de cores para os intervalos.

<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

Agulhas de calibre radial são elementos visuais usados para significar um valor definido de calibre. As agulhas estão disponíveis em uma das várias formas predefinidas. A agulha pode ter uma forma de pivô, que é colocada no centro do calibre. A forma de pivô também assume uma das formas predefinidas. Formas de pivô que incluem uma sobreposição ou uma subposição podem ter um pincel de pivô separado aplicado à forma.

Os formatos e tampas de agulha suportados são definidos usando as propriedades needleShape e needlePivotShape.

Você pode habilitar um modo interativo do medidor (usando a propriedade isNeedleDraggingEnabled) e o usuário final poderá alterar o valor arrastando a agulha entre os valores das propriedades minimumValue e 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>

Highlight Needle

O medidor radial pode ser modificado para mostrar uma segunda agulha. Isso fará com que o value da agulha principal apareça com uma opacidade menor. Para habilitar isso, primeiro defina highlightValueDisplayMode como Overlay e, em seguida, aplique um 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>

Summary

Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto e ver o medidor radial com todos os recursos e visuais 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

A seguir está uma lista de membros da API mencionados nas seções acima:

Additional Resources

Você pode encontrar mais informações sobre outros tipos de medidores nestes tópicos: