El componente de calibre lineal Ignite UI for Web Components permite visualizar datos en forma de calibre lineal. IgcLinearGaugeComponent proporciona una vista simple y concisa de un valor comparado con una escala y uno o más rangos. Admite una escala, un conjunto de marcas y un conjunto de etiquetas. El componente también tiene soporte integrado para transiciones animadas. Esta animación se puede personalizar fácilmente configurando la propiedad transitionDuration. Las características del componente de calibre lineal incluyen orientación y dirección configurables, elementos visuales configurables como la aguja y más.
Web Components Linear Gauge Example
El siguiente ejemplo demuestra cómo configurar varias propiedades en el mismo IgcLinearGaugeComponent puede transformarlo en un calibre lineal completamente diferente.
<!DOCTYPE html><html><head><title>LinearGaugeAnimation</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="options horizontal"><buttonid="animationButton1"class="button1">Gauge Animation #1</button><buttonid="animationButton2"class="button2">Gauge Animation #2</button><buttonid="animationButton3"class="button3">Gauge Animation #3</button></div><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"maximum-value="100"value="50"interval="10"label-interval="10"label-extent="0.0"minorTick-endExtent="0.10"minorTick-start-extent="0.20"tick-start-extent="0.25"tick-end-extent="0.05"tick-stroke-thickness="2"needle-shape="Needle"needle-brush="#79797a"needle-outline="#79797a"scale-stroke-thickness"0"
scale-brush="#ffffff"scale-outline="#d3d3d3"backing-brush="#ffffff"backing-outline="#d1d1d1"backing-stroke-thickness="0" ><igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Dependencies
Al instalar el componente de calibre Web Components, también se debe instalar el paquete principal.
Esta es la medida principal que muestra el componente de calibre lineal y se visualiza como una barra o puede personalizarla para que muestre casi cualquier forma, como se muestra a continuación.
<!DOCTYPE html><html><head><title>LinearGaugeNeedle</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"value="50"maximum-value="100"interval="10"is-needle-dragging-enabled="true"needle-shape="Custom"needle-brush="DodgerBlue"needle-outline="DodgerBlue"needle-stroke-thickness="1"needle-breadth="15"needle-inner-extent="0.35"needle-outer-extent="0.65"needle-outer-point-extent="0.8"needle-inner-point-extent="0.325"needle-inner-point-width="0"needle-outer-point-width="0.3"needle-inner-base-width="0"needle-outer-base-width="0.07" ></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Highlight Needle
El calibre lineal se puede modificar para mostrar una segunda aguja. Esto hará que la aguja value principal aparezca con una opacidad más baja. Para habilitar esto, primero establezca highlightValueDisplayMode en Superposición y, a continuación, aplique a highlightValue.
<!DOCTYPE html><html><head><title>LinearGaugeHighlightNeedle</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"maximum-value="100"value="75"interval="10"label-interval="10"label-extent="0.025"labels-pre-terminal="0"labels-post-initial="0"needle-brush="blue"highlight-value-display-mode="Overlay"highlight-value=25is-highlight-needle-dragging-enabled=true></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Ranges
Los rangos son elementos visuales que resaltan un rango específico de valores en una escala. Su propósito es comunicar visualmente el estado cualitativo de la barra de medición de desempeño, ilustrando al mismo tiempo el grado en que se encuentra dentro de ese estado.
<!DOCTYPE html><html><head><title>LinearGaugeRanges</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"width="100%"height="80px"minimum-value="0"value="50"maximum-value="100"interval="10"rangeBrushes="#a4bd29, #F86232"rangeOutlines="#a4bd29, #F86232"><igc-linear-graph-rangename="range1"start-value="0"end-value="50"inner-start-extent="0.075"inner-end-extent="0.075"outer-start-extent="0.25"outer-end-extent="0.4" ></igc-linear-graph-range><igc-linear-graph-rangename="range2"start-value="50"end-value="100"inner-start-extent="0.075"inner-end-extent="0.075"outer-start-extent="0.4"outer-end-extent="0.55" ></igc-linear-graph-range></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Tick Marks
Las marcas sirven como división visual de la escala en intervalos para aumentar la legibilidad del calibre lineal.
Marcas de graduación principales: las marcas de graduación principales se utilizan como delimitadores principales en la escala. La frecuencia con la que aparecen, su extensión y estilo se pueden controlar estableciendo sus propiedades correspondientes.
Marcas de graduación menores: las marcas de graduación menores representan marcas de graduación auxiliares, que pueden usarse para mejorar aún más la legibilidad de la escala y se pueden personalizar de manera similar a las principales.
<!DOCTYPE html><html><head><title>LinearGaugeTickmarks</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"value="50"maximum-value="100"interval="10"tick-brush="DodgerBlue"ticks-pre-terminal="0"ticks-post-initial="0"tick-stroke-thickness="2"tick-start-extent="0.25"tick-end-extent="0.05"minor-tick-count="4"minor-tick-brush="DarkViolet"minor-tick-end-extent="0.05"minor-tick-start-extent="0.15"minor-tick-stroke-thickness="1"></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>LinearGaugeLabels</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"value="50"maximum-value="100"interval="10"label-interval="10"label-extent="0.025"labels-pre-terminal="0"labels-post-initial="0"font-brush="DodgerBlue"font="11px Verdana" ></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Backing
El elemento de respaldo representa el fondo y el borde del componente de calibre lineal. Siempre es el primer elemento representado y el resto de elementos, como etiquetas y marcas, se superponen encima.
<!DOCTYPE html><html><head><title>LinearGaugeBacking</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"width="100%"height="80px"minimum-value="0"value="50"maximum-value="100"interval="10"backing-brush="#bddcfc"backing-outline="DodgerBlue"backing-stroke-thickness="4"backing-inner-extent="0"backing-outer-extent="1"></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Scale
La escala es un elemento visual que resalta toda la gama de valores del calibre lineal. Puedes personalizar la apariencia y la forma de la escala. También se puede invertir (usando la propiedad isScaleInverted) y todas las etiquetas se representarán de derecha a izquierda en lugar de de izquierda a derecha.
<!DOCTYPE html><html><head><title>LinearGaugeScale</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"width="100%"height="80px"minimum-value="0"value="50"maximum-value="100"interval="10"is-scale-inverted="false"scale-brush="DodgerBlue"scale-outline="Red"scale-stroke-thickness="2"scale-inner-extent="0.05"scale-outer-extent="0.65"scale-start-extent="0.05"scale-end-extent="0.95" ></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Summary
Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto y ver el medidor lineal con todas las funciones y elementos visuales habilitados.