Visão geral React Linear Gauge
O componente de medidor linear Ignite UI for React permite visualizar dados na forma de um medidor linear. O IgrLinearGauge fornece uma visão simples e concisa de um valor comparado a uma escala e um ou mais intervalos. Ele suporta uma escala, um conjunto de marcas de escala e um conjunto de rótulos. O componente também tem um suporte integrado para transições animadas. Esta animação é facilmente personalizável definindo a propriedade transitionDuration. Os recursos do componente de medidor linear incluem orientação e direção configuráveis, elementos visuais configuráveis, como a agulha, e muito mais.
React Linear Gauge Example
O exemplo a seguir demonstra como definir várias propriedades no mesmo IgrLinearGauge pode transformá-lo em um medidor linear completamente diferente.
Dependencies
Ao instalar o componente React gauge, o pacote principal também deve ser instalado.
npm install --save igniteui-react-core
npm install --save igniteui-react-gauges
Component Modules
O IgrLinearGauge requer os seguintes módulos:
import { IgrLinearGaugeModule } from 'igniteui-react-gauges';
IgrLinearGaugeModule.register();
Usage
O código a seguir demonstra como criar um medidor linear contendo uma agulha e três faixas comparativas na escala.
<IgrLinearGauge width="700px"
height="30px"
minimumValue = {5}
maximumValue = {55}
value = {43}>
<IgrLinearGraphRange startValue={0}
endValue={15}
brush="red"/>
<IgrLinearGraphRange startValue={15}
endValue={30}
brush="yellow"/>
<IgrLinearGraphRange startValue={30}
endValue={55}
brush="green"/>
</IgrLinearGauge>
Needle
Esta é a medida principal exibida pelo componente de medidor linear e é visualizada como uma barra ou você pode personalizá-la para mostrar quase qualquer formato, conforme demonstrado abaixo.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0}
maximumValue={100} interval={10}
value={50}
isNeedleDraggingEnabled={true}
needleShape="Custom"
needleBrush="DodgerBlue"
needleOutline="DodgerBlue"
needleStrokeThickness={1}
needleBreadth={15}
needleInnerExtent={0.35}
needleOuterExtent={0.65}
needleOuterPointExtent={0.8}
needleInnerPointExtent={0.325}
needleInnerPointWidth={0}
needleOuterPointWidth={0.3}
needleInnerBaseWidth={0}
needleOuterBaseWidth={0.07} />
Highlight Needle
O medidor linear 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.
<IgrLinearGauge
height="80px"
width="100%"
value={75}
minimumValue={0}
maximumValue={100}
interval={10}
labelInterval={10}
labelExtent={0.025}
labelsPreTerminal={0}
labelsPostInitial={0}
needleBrush='blue'
highlightValueDisplayMode="Overlay"
highlightValue={25}
isHighlightNeedleDraggingEnabled={true}
/>
Ranges
Os intervalos são elementos visuais que destacam um intervalo especificado de valores em uma escala. Seu propósito é comunicar visualmente o estado qualitativo da medida da barra de desempenho, ilustrando ao mesmo tempo o grau em que ela reside dentro desse estado.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0} value={50}
maximumValue={100} interval={10}
rangeBrushes="#a4bd29, #F86232"
rangeOutlines="#a4bd29, #F86232" >
<IgrLinearGraphRange
startValue={0} endValue={50}
innerStartExtent={0.075} innerEndExtent={0.075}
outerStartExtent={0.25} outerEndExtent={0.4} />
<IgrLinearGraphRange
startValue={50} endValue={100}
innerStartExtent={0.075} innerEndExtent={0.075}
outerStartExtent={0.4} outerEndExtent={0.55} />
</IgrLinearGauge>
Tick Marks
As marcas de verificação servem como uma divisão visual da escala em intervalos para aumentar a legibilidade do medidor linear.
Marcas de escala principais – As marcas de escala principais são usadas como delimitadores primários na escala. A frequência em que aparecem, suas extensões e estilo podem ser controlados definindo suas propriedades correspondentes.
Marcas de verificação menores – As marcas de verificação menores representam marcas de verificação auxiliares, que podem ser usadas para melhorar ainda mais a legibilidade da escala e podem ser personalizadas de forma semelhante às principais.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0} value={50}
maximumValue={100}
interval={10}
tickBrush="DodgerBlue"
ticksPreTerminal={0}
ticksPostInitial={0}
tickStrokeThickness={2}
tickStartExtent={0.25}
tickEndExtent={0.05}
minorTickCount={4}
minorTickBrush="DarkViolet"
minorTickEndExtent={0.05}
minorTickStartExtent={0.15}
minorTickStrokeThickness={1} />
Labels
As etiquetas indicam as medidas na escala.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0} value={50}
maximumValue={100} interval={10}
labelInterval={10}
labelExtent={0.025}
labelsPreTerminal={0}
labelsPostInitial={0}
fontBrush="DodgerBlue"
font="11px Verdana" />
Backing
O elemento de apoio representa o fundo e a borda do componente de calibre linear. Ele é sempre o primeiro elemento renderizado e todos os outros elementos, como rótulos e marcas de escala, são sobrepostos a ele.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0} value={50}
maximumValue={100} interval={10}
backingBrush="#bddcfc"
backingOutline="DodgerBlue"
backingStrokeThickness={4}
backingInnerExtent={0}
backingOuterExtent={1} />
Scale
A escala é um elemento visual que destaca toda a gama de valores no medidor linear. Você pode personalizar a aparência e o formato da escala. Ela também pode ser invertida (usando a propriedade isScaleInverted) e todos os rótulos serão renderizados da direita para a esquerda em vez da esquerda para a direita.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0} value={50}
maximumValue={100} interval={10}
isScaleInverted={false}
scaleBrush="DodgerBlue"
scaleOutline="DarkViolet"
scaleStrokeThickness={1}
scaleInnerExtent={0.05}
scaleOuterExtent={0.65}
scaleStartExtent={0.05}
scaleEndExtent={0.95} />
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 linear com todos os recursos e visuais habilitados.
<IgrLinearGauge
height="80px" width="400px"
minimumValue={0}
maximumValue={100}
labelInterval={10}
labelExtent={0.025}
labelsPreTerminal={0}
labelsPostInitial={0}
fontBrush="Black"
font="11px Verdana"
interval={10}
tickBrush="Black"
ticksPreTerminal={0}
ticksPostInitial={0}
tickStrokeThickness={2}
tickStartExtent={0.25}
tickEndExtent={0.05}
minorTickCount={4}
minorTickBrush="Black"
minorTickEndExtent={0.05}
minorTickStartExtent={0.15}
minorTickStrokeThickness={1}
value={50}
isNeedleDraggingEnabled={true}
needleShape="Custom"
needleBrush="Black"
needleOutline="Black"
needleStrokeThickness={1}
needleBreadth={15}
needleInnerExtent={0.35}
needleOuterExtent={0.65}
needleOuterPointExtent={0.8}
needleInnerPointExtent={0.325}
needleInnerPointWidth={0}
needleOuterPointWidth={0.3}
needleInnerBaseWidth={0}
needleOuterBaseWidth={0.07}
isScaleInverted={false}
scaleBrush="Gray"
scaleOutline="Gray"
scaleStrokeThickness={1}
scaleInnerExtent={0.05}
scaleOuterExtent={0.65}
scaleStartExtent={0.05}
scaleEndExtent={0.95}
backingBrush="#cecece"
backingOutline="#cecece"
backingStrokeThickness={4}
backingInnerExtent={0}
backingOuterExtent={1}
rangeBrushes ="#C62828, #F96232, #FF9800"
rangeOutlines="#C62828, #F96232, #FF9800">
<IgrLinearGraphRange
startValue={0} endValue={50}
innerStartExtent={0.075} innerEndExtent={0.075}
outerStartExtent={0.25} outerEndExtent={0.4} />
<IgrLinearGraphRange
startValue={50} endValue={100}
innerStartExtent={0.075} innerEndExtent={0.075}
outerStartExtent={0.4} outerEndExtent={0.55} />
</IgrLinearGauge>
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: