Visão geral do medidor radial Blazor

O componente de medidor radial Blazor fornece vários elementos visuais, como agulha, marcas de escala, intervalos e rótulos, para criar uma forma e escala predefinidas. O IgbRadialGauge também possui suporte integrado para transições animadas. Essa animação é facilmente personalizável definindo a TransitionDuration propriedade.

Blazor Radial Gauge Example

O exemplo a seguir demonstra como a configuração de várias propriedades no mesmo IgbRadialGauge pode transformá-lo em um medidor radial completamente diferente.

Consulte estes tópicos sobre como adicionar o pacote IgniteUI.Blazor.

Depois, você pode começar a implementar o controle adicionando os seguintes namespaces:

@using IgniteUI.Blazor.Controls

Component Modules

O IgbRadialGauge requer os seguintes módulos:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));

Usage

O código a seguir demonstra como criar um medidor radial contendo uma agulha e três faixas comparativas na escala.

<IgbRadialGauge Height="100%" Width="100%"
      MinimumValue="0" Value="25"
      MaximumValue="100" Interval="5" >
    <IgbRadialGaugeRange
          StartValue="0"
          EndValue="30"
          Brush="red">
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange
          StartValue="30"
          EndValue="60"
          Brush="Yellow" >
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange
          StartValue="60"
          EndValue="100"
          Brush="Green">
    </IgbRadialGaugeRange>
</IgbRadialGauge>

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 abrangendo as ScaleStartAngle propriedades e ScaleEndAngle. Isso pode ser definido definindo a BackingShape propriedade.

 <IgbRadialGauge Height="100%" Width="100%"
    BackingShape="RadialGaugeBackingShape.Fitted"
    BackingBrush="#FCFCFC"
    BackingOutline="DodgerBlue"
    BackingOversweep="5"
    BackingCornerRadius="10"
    BackingStrokeThickness="5"
    BackingOuterExtent="0.8"
    BackingInnerExtent="0.15"

    ScaleStartAngle="135"
    ScaleEndAngle="45"
    MinimumValue="0"
    MaximumValue="80"
    Value="50"
    Interval="10">
</IgbRadialGauge>

Scale

A escala é um elemento visual que destaca toda a gama de valores no medidor que pode ser criada fornecendo MinimumValue e MaximumValue valores. Juntamente com o suporte, define a forma geral do medidor. As ScaleStartAngle propriedades e ScaleEndAngle definem os limites do arco da escala. While, a ScaleSweepDirection propriedade especifica se a escala varre no sentido horário ou anti-horário. Você pode personalizar a aparência da escala definindo ScaleBrush ScaleStartExtent e ScaleEndExtent propriedades.

<IgbRadialGauge
  ScaleStartAngle="135"
  ScaleEndAngle="45"
  ScaleBrush="DodgerBlue"
  ScaleSweepDirection="SweepDirection.Clockwise"
  ScaleOversweep="1"
  ScaleOversweepShape="RadialGaugeScaleOversweepShape.Fitted"
  ScaleStartExtent="0.45"
  ScaleEndExtent="0.575"
  MinimumValue="0"
  MaximumValue="80"
  Value="50"
  Interval="10">
</IgbRadialGauge>

Labels and Titles

Os rótulos de medidor radial são elementos visuais que exibem valores numéricos em um intervalo especificado entre os MinimumValue valores das propriedades e MaximumValue. Você pode posicionar rótulos definindo a propriedade como uma fração, em que 0 representa o LabelExtent centro do medidor e 1 representa a extensão externa do suporte do medidor. 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.

<IgbRadialGauge
  Height="100%" Width="100%"
  LabelInterval="10"
  LabelInterval="10"
  Font="11px Verdana"
  FontBrush="DodgerBlue"
  MinimumValue="0"
  MaximumValue="80"
  Value="50"
  Interval="10">
</IgbRadialGauge>

Title & Subtitle

TitleText e SubtitleText propriedades estão disponíveis e podem ser usadas para exibir texto personalizado para a agulha. Alternativamente, TitleDisplaysValue e SubtitleDisplaysValue, quando definido como true, permitirá exibir o valor da agulha e substituir TitleText e SubtitleText. Assim, você pode ocupar um texto personalizado para o título, mas mostrar o valor por meio do subtítulo e vice-versa.

Se a agulha de destaque for mostrada, conforme explicado abaixo, o texto personalizado poderá ser mostrado via HighlightLabelText, caso contrário HighlightLabelDisplaysValue, poderá ser ativado e exibir seu valor.

<IgbRadialGauge
  TitleText="Global Sales"
  SubTitleText="2024">
</IgbRadialGauge>

Optical Scaling

Os rótulos e títulos do medidor radial podem alterar sua escala. Para habilitar isso, primeiro defina OpticalScalingEnabled como true. Em seguida, você pode definir OpticalScalingSize o que gerencia o tamanho no qual os rótulos têm 100% de escala óptica. 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 essa propriedade for definida como 500 e o tamanho do medidor px for dobrado para, por exemplo. 1000.

Tick Marks

As marcas de escala são linhas finas que irradiam do centro do medidor radial. Existem dois tipos de marcas de verificação: maior e menor. As marcas de escala principais são exibidas entre as Interval MinimumValue propriedades e MaximumValue. Use a MinorTickCount propriedade 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) como TickStartExtent, TickEndExtent, MinorTickStartExtent, e MinorTickEndExtent propriedades.

 <IgbRadialGauge Height="100%" Width="100%"
    TickStartExtent="0.5"
    TickEndExtent="0.57"
    TickStrokeThickness="2"
    TickBrush="DodgerBlue"
    MinorTickCount="4"
    MinorTickEndExtent="0.520"
    MinorTickStartExtent="0.57"
    MinorTickStrokeThickness="1"
    MinorTickBrush="DarkViolet"
    MinimumValue="0"
    MaximumValue="80"
    Value="50"
    Interval="10">
</IgbRadialGauge>

Ranges

Um intervalo realça um conjunto de valores contínuos associados a propriedades and MaximumValue especificadas MinimumValue. 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 RangeBrushes as propriedades e RangeOutlines como uma lista de cores para os intervalos.

<IgbRadialGauge Height="100%" Width="100%"
      MinimumValue="0" Value="50"
      MaximumValue="80" Interval="10"
      RangeBrushes="#A4BD29, #F86232"
      RangeOutlines="#A4BD29, #F86232">
    <IgbRadialGaugeRange StartValue="10"
          EndValue="25"
          InnerStartExtent="0.50"
          InnerEndExtent="0.50"
          OuterStartExtent="0.57"
          OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange StartValue="25"
          EndValue="40"
          InnerStartExtent="0.50"
          InnerEndExtent="0.50"
          OuterStartExtent="0.57"
          OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
</IgbRadialGauge>

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 de agulha e tampas suportadas são definidas usando as NeedleShape propriedades e NeedlePivotShape.

Você pode habilitar um modo interativo do medidor (usando IsNeedleDraggingEnabled a propriedade) e o usuário final poderá alterar o valor arrastando a agulha entre os valores de MinimumValue e MaximumValue propriedades.

<IgbRadialGauge Height="100%" Width="100%"
    IsNeedleDraggingEnabled="true"
    IsNeedleDraggingConstrained="true"
    NeedleShape="RadialGaugeNeedleShape.NeedleWithBulb"
    NeedleBrush="DodgerBlue"
    NeedleOutline="DodgerBlue"
    NeedleEndExtent="0.475"
    NeedleStrokeThickness="1"
    NeedlePivotShape="RadialGaugePivotShape.CircleOverlay"
    NeedlePivotBrush="#9F9FA0"
    NeedlePivotOutline="#9F9FA0"
    NeedlePivotWidthRatio="0.2"
    NeedlePivotStrokeThickness="1"
    Value="50"
    MinimumValue="0"
    MaximumValue="80"
    Interval="10">
</IgbRadialGauge>

Highlight Needle

O medidor radial pode ser modificado para mostrar uma segunda agulha. Isso fará com que a agulha Value principal apareça com uma opacidade menor. Para habilitar isso, primeiro defina HighlightValueDisplayMode como Overlay e aplique a HighlightValue.

<IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0"
    MaximumValue="100"
    Value="30"
    Interval="10"
    LabelInterval="10"
    LabelExtent="0.65"
    HighlightValue="50"
    HighlightValueDisplayMode=HighlightedValueDisplayMode.Overlay
    HighlightLabelDisplaysValue=true
    HighlightLabelSnapsToNeedlePivot=true
    IsHighlightNeedleDraggingEnabled=true
</IgbLinearGauge>

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.

<IgbRadialGauge Height="100%" Width="100%"
             MinimumValue="0"
             MaximumValue="80"
             Value="50"
             Interval="10"

             ScaleStartAngle="135"
             ScaleEndAngle="45"
             ScaleBrush="DodgerBlue"
             ScaleSweepDirection="SweepDirection.Clockwise"
             ScaleOversweep="1"
             ScaleOversweepShape="RadialGaugeScaleOversweepShape.Fitted"
             ScaleStartExtent="0.45"
             ScaleEndExtent="0.575"

             IsNeedleDraggingEnabled="true"
             IsNeedleDraggingConstrained="true"
             NeedleShape="RadialGaugeNeedleShape.NeedleWithBulb"
             NeedleBrush="DodgerBlue"
             NeedleOutline="DodgerBlue"
             NeedleEndExtent="0.475"
             NeedleStrokeThickness="1"
             NeedlePivotShape="RadialGaugePivotShape.CircleOverlay"
             NeedlePivotBrush="#9F9FA0"
             NeedlePivotOutline="#9F9FA0"
             NeedlePivotWidthRatio="0.2"
             NeedlePivotStrokeThickness="1"
             TickStartExtent="0.5"
             TickEndExtent="0.57"
             TickStrokeThickness="2"
             TickBrush="DodgerBlue"

             MinorTickCount="4"
             MinorTickEndExtent="0.520"
             MinorTickStartExtent="0.57"
             MinorTickStrokeThickness="1"
             MinorTickBrush="DarkViolet"

             LabelExtent="0.65"
             LabelInterval="10"
             Font="11px Verdana"
             FontBrush="Black"
             BackingShape="RadialGaugeBackingShape.Fitted"
             BackingBrush="#FCFCFC"
             BackingOutline="DodgerBlue"
             BackingOversweep="5"
             BackingCornerRadius="10"
             BackingStrokeThickness="5"
             BackingOuterExtent="0.8"
             BackingInnerExtent="0.15"

             RangeBrushes="#A4BD29, #F86232"
             RangeOutlines="#A4BD29, #F86232">
    <IgbRadialGaugeRange StartValue="20"
        EndValue="40"
        InnerStartExtent="0.50"
        InnerEndExtent="0.50"
        OuterStartExtent="0.57"
        OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange StartValue="40"
        EndValue="60"
        InnerStartExtent="0.50"
        InnerEndExtent="0.50"
        OuterStartExtent="0.57"
        OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
</IgbRadialGauge>

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: