Visão geral React Linear Gauge
The Ignite UI for React linear gauge component allows for visualizing data in the form of a linear gauge. The IgrLinearGauge provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.
React Linear Gauge Example
O exemplo a seguir demonstra como definir múltiplas propriedades na mesmaIgrLinearGauge pode transformá-la em uma bitola 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
OIgrLinearGauge 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 calibre linear 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.
<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 faixa de valores na bitola linear. Você pode personalizar a aparência e o formato da escama. Também pode ser invertido (usandoisScaleInverted propriedade) e todos os rótulos serão renderizados da direita para a esquerda em vez de 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: