Visão geral do 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

O exemplo a seguir demonstra como definir múltiplas propriedades na mesmaIgxRadialGaugeComponent pode transformá-la em uma bitola 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

OIgxRadialGaugeComponent 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 calibre circular de 360 graus, enquanto uma forma ajustada cria um segmento de arco preenchido que abrange asscaleStartAngle propriedades e (escaleEndAngle Isso pode ser definido definindo a propriedadebackingShape.

<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 toda a faixa de valores no medidor, que podem ser criados por meio deminimumValue fornecimento de valores emaximumValue valores. Junto com o suporte, define a forma geral da bitola. AsscaleStartAngle propriedades escaleEndAngle definem limites do arco da escala. Enquanto isso, ascaleSweepDirection propriedade especifica se a escala varre no sentido horário ou anti-horário. Você pode personalizar a aparência da escala configurandoscaleBrushscaleStartExtent escaleEndExtent propriedades.

<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

As etiquetas radiais de medidor são elementos visuais que exibem valores numéricos em um intervalo especificado entre os valores dasminimumValue propriedades emaximumValue. Você pode posicionar os rótulos definindo alabelExtent propriedade para uma fração, onde 0 representa o centro da calibre e 1 representa a extensão externa do suporte da calibre. Além disso, você pode personalizar etiquetas definindo várias propriedades de estilo, comofontBrush efont.

Cada uma dessas etiquetas para a agulha possui vários atributos de estilo que você pode aplicar para alterar a fonte, o ângulo, o pincel e a distância do centro do calibre, comotitleExtent,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

titleTextesubtitleText propriedades estão disponíveis e podem ser usadas para exibir texto personalizado para a agulha. Alternativamente,titleDisplaysValue esubtitleDisplaysValue, quando definido como verdadeiro, permitirá exibir o valor da agulha e sobreportitleText e.subtitleText Assim, você pode ocupar texto personalizado para o título, mas mostrar o valor pela legenda e vice-versa.

Se a agulha de destaque for mostrada, como explicado abaixo, o texto personalizado pode ser mostrado viahighlightLabelText ela, caso contráriohighlightLabelDisplaysValue pode ser ativado e exibido 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 permitir isso, primeiro definaopticalScalingEnabled como verdadeiro. Depois, você pode definiropticalScalingSize qual gerencia o tamanho em que as etiquetas têm 100% de escala óptica. Rótulos terão fontes maiores quando o tamanho da calibre for maior. Por exemplo, rótulos terão um tamanho de fonte 200% maior quando essa propriedade é definida para 500 e o tamanho do calibre px é dobrado para por exemplo. 1000.

Tick Marks

Marcas de marca são linhas finas que irradiam do centro do medidor radial. Existem dois tipos de marcas: maiores e menores. As principais marcas de marca são exibidas entreinterval asminimumValue propriedades emaximumValue. Use aminorTickCount propriedade para especificar o número de marcas menores exibidas entre cada marca principal. Você pode controlar o comprimento das marcas definindo uma fração (entre 0 e 1) paratickStartExtent,tickEndExtent,minorTickStartExtent, eminorTickEndExtent as propriedades.

<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 limitados por propriedades eminimumValue especificadasmaximumValue. Você pode adicionar vários intervalos ao medidor radial especificando seus valores iniciais e finais. Cada faixa possui algumas propriedades de personalização, comobrush e.outline Alternativamente, você pode definirrangeBrushes as propriedades YrangeOutlines para uma lista de cores para as faixas.

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

As formas e tampas das agulhas suportadas são definidas usando asneedleShape propriedades e.needlePivotShape

Você pode ativar um modo interativo do medidor (usandoisNeedleDraggingEnabled a propriedade) e o usuário final poderá alterar o valor arrastando a agulha entre os valores deminimumValue emaximumValue as propriedades.

<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 as agulhasvalue principais apareçam com menor opacidade. Para habilitar isso, primeiro definahighlightValueDisplayMode Overlay e depois aplique umhighlightValue.

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