Web Components Radial Gauge Overview
The Web Components 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 IgcRadialGaugeComponent also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property.
Web Components Radial Gauge Example
The following sample demonstrates how setting multiple properties on the same IgcRadialGaugeComponent can transform it to completely different radial gauge.
Dependencies
Ao instalar o componente do medidor, o pacote principal também deve ser instalado.
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges
Component Modules
The IgcRadialGaugeComponent requires the following modules:
// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// Radial Gauge Module
import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
// register the modules
ModuleManager.register(
IgcRadialGaugeModule
);
Usage
O código a seguir demonstra como criar um medidor radial contendo uma agulha e três faixas comparativas na escala.
<igc-radial-gauge
height="400px"
width="400px"
value="25"
interval="5"
minimum-value="0"
maximum-value="100">
<igc-radial-gauge-range
start-value="0"
end-value="30"
brush="red">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="30"
end-value="60"
brush="yellow">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="60"
end-value="100"
brush="green">
</igc-radial-gauge-range>
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
backing-shape="Fitted"
backing-brush="#fcfcfc"
backing-outline="DodgerBlue"
backing-oversweep="5"
backing-corner-radius="10"
backing-stroke-thickness="5"
backing-outer-extent="0.8"
backing-inner-extent="0.15"
scale-start-angle="135" scale-end-angle="45"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
scale-start-angle="135"
scale-end-angle="45"
scale-brush="DodgerBlue"
scale-sweep-direction="Clockwise"
scale-oversweep="1"
scale-oversweep-shape="Fitted"
scale-start-extent="0.45"
scale-end-extent="0.575"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
label-extent="0.65"
label-interval="10"
font="11px Verdana"
font-brush="DodgerBlue"
minimum-value="0" value="50"
maximum-value="100" interval="10">
</igc-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.
<igc-radial-gauge
title-text="Global Sales"
subtitle-text="2024">
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
tick-start-extent="0.45"
tick-end-extent="0.575"
tick-stroke-thickness="2"
tick-brush="DodgerBlue"
minor-tick-count="4"
minor-tick-end-extent="0.5"
minor-tick-start-extent="0.575"
minor-tick-stroke-thickness="1"
minor-tick-brush="DarkViolet"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
minimum-value="0" value="50"
maximum-value="80" interval="10"
range-brushes ="red, yellow, green"
range-outlines="red, yellow, green">
<igc-radial-gauge-range
start-value="5" end-value="15" brush="red">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="15" end-value="35" brush="yellow">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="35" end-value="45" brush="green">
</igc-radial-gauge-range>
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
is-needle-dragging-enabled="true"
is-needle-dragging-constrained="true"
needle-shape="NeedleWithBulb"
needle-brush="DodgerBlue"
needle-outline="DodgerBlue"
needle-end-extent="0.475"
needle-stroke-thickness="1"
needle-pivot-shape="CircleOverlay"
needle-pivot-brush="#9f9fa0"
needle-pivot-outline="#9f9fa0"
needle-pivot-width-ratio="0.2"
needle-pivot-stroke-thickness="1"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-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.
<igc-radial-gauge
id="gauge"
highlight-value="50"
highlight-value-display-mode="Overlay"
highlight-label-displays-value="true"
highlight-label-snaps-to-needle-pivot="true"
is-highlight-needle-dragging-enabled="true"
label-interval="10"
label-extent="0.65"
height="100%"
width="100%"
minimum-value="0" value="30"
maximum-value="100" interval="10">
</igc-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.
<igc-radial-gauge
height="300px" width="300px"
minimum-value="0"
maximum-value="80"
scale-start-angle="135"
scale-end-angle="45"
scale-brush="#c6c6c6"
scale-sweep-direction="Clockwise"
scale-oversweep="1"
scale-oversweep-shape="Fitted"
scale-start-extent="0.45"
scale-end-extent="0.575"
value="70"
is-needle-dragging-enabled="true"
is-needle-dragging-constrained="true"
needle-shape="NeedleWithBulb"
needle-brush="DodgerBlue"
needle-outline="DodgerBlue"
needle-end-extent="0.475"
needle-stroke-thickness="1"
needle-pivot-shape="CircleOverlay"
needle-pivot-brush="#9f9fa0"
needle-pivot-outline="#9f9fa0"
needle-pivot-width-ratio="0.2"
needle-pivot-stroke-thickness="1"
interval="10"
tick-start-extent="0.45"
tick-end-extent="0.575"
tick-stroke-thickness="2"
tick-brush="Black"
minor-tick-count="4"
minor-tick-end-extent="0.5"
minor-tick-start-extent="0.575"
minor-tick-stroke-thickness="1"
minor-tick-brush="Black"
label-extent="0.65"
label-interval="10"
font="11px Verdana"
font-brush="Black"
backing-shape="Fitted"
backing-brush="#ededed"
backing-outline="Gray"
backing-oversweep="5"
backing-corner-radius="10"
backing-stroke-thickness="5"
backing-outer-extent="0.8"
backing-inner-extent="0.15"
range-brushes ="#a4bd29, #F86232"
range-outlines="#a4bd29, #F86232">
<igc-radial-gauge-range
start-value="20" end-value="40"
inner-start-extent="0.45" inner-end-extent="0.45"
outer-start-extent="0.57" outer-end-extent="0.57">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="40" end-value="60"
inner-start-extent="0.45" inner-end-extent="0.45"
outer-start-extent="0.57" outer-end-extent="0.57">
</igc-radial-gauge-range>
</igc-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: