Descripción general del gráfico de viñetas Angular
El componente de gráfico de viñetas Angular permite una vista lineal y concisa de las medidas comparadas con una escala.
El componente de gráfico de viñetas Ignite UI for Angular le brinda la capacidad de crear presentaciones de datos atractivas, reemplazando los medidores y medidores que se utilizan en los paneles con gráficos de barras simples pero directos y claros. Un gráfico de viñetas es una de las formas más efectivas y eficientes de presentar el progreso hacia los objetivos, rangos buenos/mejores/mejores, o comparar múltiples mediciones en el menor espacio horizontal o vertical posible.
Ejemplo de gráfico de viñeta Angular
El siguiente ejemplo demuestra cómo configurar varias propiedades en el mismo IgxBulletGraphComponent
puede transformarlo en un gráfico de viñetas completamente diferente.
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
import { IgxButtonModule } from "igniteui-angular" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule,
IgxButtonModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
import { IgxLinearGraphRangeComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements AfterViewInit {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
private shouldAnimate: boolean = false ;
public ngAfterViewInit(): void {
this .AnimateToGauge3();
}
public AnimateToGauge3(): void {
if (this .shouldAnimate){
this .bulletGraph.transitionDuration = 500 ;
}
this .bulletGraph.minimumValue = 0 ;
this .bulletGraph.maximumValue = 120 ;
this .bulletGraph.value = 70 ;
this .bulletGraph.interval = 10 ;
this .bulletGraph.labelInterval = 10 ;
this .bulletGraph.labelExtent = 0.02 ;
this .bulletGraph.valueInnerExtent = 0.5 ;
this .bulletGraph.valueOuterExtent = 0.7 ;
this .bulletGraph.valueBrush = "#000000" ;
this .bulletGraph.targetValueBrush = "#000000" ;
this .bulletGraph.targetValueBreadth = 10 ;
this .bulletGraph.targetValue = 90 ;
this .bulletGraph.minorTickCount = 5 ;
this .bulletGraph.minorTickEndExtent = 0.10 ;
this .bulletGraph.minorTickStartExtent = 0.20 ;
this .bulletGraph.tickStartExtent = 0.20 ;
this .bulletGraph.tickEndExtent = 0.05 ;
this .bulletGraph.tickStrokeThickness = 2 ;
const range1 = new IgxLinearGraphRangeComponent();
range1.startValue = 0 ;
range1.endValue = 40 ;
const range2 = new IgxLinearGraphRangeComponent();
range2.startValue = 40 ;
range2.endValue = 80 ;
const range3 = new IgxLinearGraphRangeComponent();
range3.startValue = 80 ;
range3.endValue = 120 ;
this .bulletGraph.rangeBrushes = [ "#FF9800" , "#F96232" , "#C62828" ];
this .bulletGraph.rangeOutlines = [ "#FF9800" , "#F96232" , "#C62828" ];
this .bulletGraph.ranges.clear();
this .bulletGraph.ranges.add(range1);
this .bulletGraph.ranges.add(range2);
this .bulletGraph.ranges.add(range3);
for (let i = 0 ; i < this .bulletGraph.ranges.count; i++) {
const range = this .bulletGraph.ranges.item(i);
range.innerStartExtent = 0.2 ;
range.innerEndExtent = 0.2 ;
range.outerStartExtent = 0.95 ;
range.outerEndExtent = 0.95 ;
}
this .bulletGraph.scaleBackgroundThickness = 0.5 ;
this .bulletGraph.scaleBackgroundBrush = "#dbdbdb" ;
this .bulletGraph.scaleBackgroundOutline = "gray" ;
this .bulletGraph.scaleStartExtent = 0.05 ;
this .bulletGraph.scaleEndExtent = 0.95 ;
this .bulletGraph.scaleBackgroundThickness = 0 ;
this .bulletGraph.backingBrush = "#f7f7f7" ;
this .bulletGraph.backingOutline = "#d1d1d1" ;
this .bulletGraph.backingStrokeThickness = 0 ;
this .shouldAnimate = true ;
}
public AnimateToGauge2(): void {
if (this .shouldAnimate){
this .bulletGraph.transitionDuration = 500 ;
}
this .bulletGraph.minimumValue = 100 ;
this .bulletGraph.maximumValue = 200 ;
this .bulletGraph.value = 120 ;
this .bulletGraph.interval = 10 ;
this .bulletGraph.labelInterval = 10 ;
this .bulletGraph.labelExtent = 0.02 ;
this .bulletGraph.valueInnerExtent = 0.5 ;
this .bulletGraph.valueOuterExtent = 0.7 ;
this .bulletGraph.valueBrush = "#000000" ;
this .bulletGraph.targetValueBrush = "#000000" ;
this .bulletGraph.targetValueBreadth = 10 ;
this .bulletGraph.targetValue = 180 ;
this .bulletGraph.minorTickCount = 5 ;
this .bulletGraph.minorTickEndExtent = 0.10 ;
this .bulletGraph.minorTickStartExtent = 0.20 ;
this .bulletGraph.tickStartExtent = 0.20 ;
this .bulletGraph.tickEndExtent = 0.05 ;
this .bulletGraph.tickStrokeThickness = 2 ;
const range1 = new IgxLinearGraphRangeComponent();
range1.startValue = 100 ;
range1.endValue = 125 ;
const range2 = new IgxLinearGraphRangeComponent();
range2.startValue = 125 ;
range2.endValue = 150 ;
const range3 = new IgxLinearGraphRangeComponent();
range3.startValue = 150 ;
range3.endValue = 175 ;
const range4 = new IgxLinearGraphRangeComponent();
range4.startValue = 175 ;
range4.endValue = 200 ;
this .bulletGraph.rangeBrushes = [ "#0078C8" , "#0099FF" , "#21A7FF" , "#4FB9FF" ];
this .bulletGraph.rangeOutlines = [ "#0078C8" , "#0099FF" , "#21A7FF" , "#4FB9FF" ];
this .bulletGraph.ranges.clear();
this .bulletGraph.ranges.add(range1);
this .bulletGraph.ranges.add(range2);
this .bulletGraph.ranges.add(range3);
this .bulletGraph.ranges.add(range4);
for (let i = 0 ; i < this .bulletGraph.ranges.count; i++) {
const range = this .bulletGraph.ranges.item(i);
range.innerStartExtent = 0.2 ;
range.innerEndExtent = 0.2 ;
range.outerStartExtent = 0.95 ;
range.outerEndExtent = 0.95 ;
}
this .bulletGraph.scaleBackgroundThickness = 0.5 ;
this .bulletGraph.scaleBackgroundBrush = "#dbdbdb" ;
this .bulletGraph.scaleBackgroundOutline = "gray" ;
this .bulletGraph.scaleStartExtent = 0.05 ;
this .bulletGraph.scaleEndExtent = 0.95 ;
this .bulletGraph.scaleBackgroundThickness = 0 ;
this .bulletGraph.backingBrush = "#f7f7f7" ;
this .bulletGraph.backingOutline = "#d1d1d1" ;
this .bulletGraph.backingStrokeThickness = 0 ;
this .shouldAnimate = true ;
}
public AnimateToGauge1(): void {
if (this .shouldAnimate){
this .bulletGraph.transitionDuration = 500 ;
}
this .bulletGraph.minimumValue = 0 ;
this .bulletGraph.maximumValue = 80 ;
this .bulletGraph.value = 70 ;
this .bulletGraph.interval = 20 ;
this .bulletGraph.labelInterval = 20 ;
this .bulletGraph.labelExtent = 0.02 ;
this .bulletGraph.valueInnerExtent = 0.5 ;
this .bulletGraph.valueOuterExtent = 0.7 ;
this .bulletGraph.valueBrush = "#000000" ;
this .bulletGraph.targetValueBrush = "#000000" ;
this .bulletGraph.targetValueBreadth = 10 ;
this .bulletGraph.targetValue = 60 ;
this .bulletGraph.minorTickCount = 5 ;
this .bulletGraph.minorTickEndExtent = 0.10 ;
this .bulletGraph.minorTickStartExtent = 0.20 ;
this .bulletGraph.tickStartExtent = 0.20 ;
this .bulletGraph.tickEndExtent = 0.05 ;
this .bulletGraph.tickStrokeThickness = 2 ;
const range1 = new IgxLinearGraphRangeComponent();
range1.startValue = 0 ;
range1.endValue = 40 ;
const range2 = new IgxLinearGraphRangeComponent();
range2.startValue = 40 ;
range2.endValue = 80 ;
this .bulletGraph.rangeBrushes = [ "#a4bd29" , "#F86232" ];
this .bulletGraph.rangeOutlines = [ "#a4bd29" , "#F86232" ];
this .bulletGraph.ranges.clear();
this .bulletGraph.ranges.add(range1);
this .bulletGraph.ranges.add(range2);
for (let i = 0 ; i < this .bulletGraph.ranges.count; i++) {
const range = this .bulletGraph.ranges.item(i);
range.innerStartExtent = 0.2 ;
range.innerEndExtent = 0.2 ;
range.outerStartExtent = 0.95 ;
range.outerEndExtent = 0.95 ;
}
this .bulletGraph.scaleBackgroundThickness = 0.5 ;
this .bulletGraph.scaleBackgroundBrush = "#dbdbdb" ;
this .bulletGraph.scaleBackgroundOutline = "gray" ;
this .bulletGraph.scaleStartExtent = 0.05 ;
this .bulletGraph.scaleEndExtent = 0.95 ;
this .bulletGraph.scaleBackgroundThickness = 0 ;
this .bulletGraph.backingBrush = "#f7f7f7" ;
this .bulletGraph.backingOutline = "#d1d1d1" ;
this .bulletGraph.backingStrokeThickness = 0 ;
this .shouldAnimate = true ;
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<button (click )="AnimateToGauge1()"
class ="options-button" > Animation #1</button >
<button (click )="AnimateToGauge2()"
class ="options-button" > Animation #2</button >
<button (click )="AnimateToGauge3()"
class ="options-button" > Animation #3</button >
</div >
<div class ="container" >
<igx-bullet-graph
#bulletGraph
height ="80px"
width ="400px"
minimumValue =0
maximumValue =120
valueBrush ="#4286f4"
value =70
targetValueBrush ="#4286f4"
targetValue =90
targetValueBreadth =10
interval =10
labelInterval =10
labelExtent =0.02
rangeBrushes ="#FF9800, #F96232, #C62828"
rangeOutlines ="#FF9800, #F96232, #C62828"
scaleBackgroundThickness =0
scaleBackgroundBrush ="#dbdbdb"
scaleBackgroundOutline ="gray" >
</igx-bullet-graph >
</div >
</div >
html コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
El gráfico de viñetas admite una escala, un conjunto de marcas y un conjunto de etiquetas. El componente de gráfico de viñetas también tiene soporte integrado para transiciones animadas. Esta animación se puede personalizar fácilmente configurando la propiedad transitionDuration
. Las características del gráfico de viñetas incluyen orientación y dirección configurables, elementos visuales configurables como la aguja y más.
dependencias
Al instalar el paquete de medidores, también se debe instalar el paquete central.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
cmd
Módulos de componentes
El IgxBulletGraphComponent
requiere los siguientes módulos:
import { IgxBulletGraphModule } from 'igniteui-angular-gauges' ;
@NgModule ({
imports : [
IgxBulletGraphModule
]
})
export class AppModule {}
ts
Uso
El siguiente código explica cómo crear un componente de gráfico de viñetas y configurar una barra de rendimiento, un marcador de medida comparativa y tres rangos comparativos en la escala.
<igx-bullet-graph height ="100"
width ="300"
minimumValue ="5"
maximumValue ="55"
value ="35"
targetValue ="43" >
<igx-linear-graph-range startValue ="0"
endValue ="15"
brush ="#828181" >
</igx-linear-graph-range >
<igx-linear-graph-range startValue ="15"
endValue ="30"
brush ="#AAAAAA" >
</igx-linear-graph-range >
<igx-linear-graph-range startValue ="30"
endValue ="55"
brush ="#D0D0D0" >
</igx-linear-graph-range >
</igx-bullet-graph >
html
Medidas comparativas
El gráfico de viñetas puede mostrar dos medidas: valor de rendimiento y valor objetivo.
El valor de rendimiento es la medida principal que muestra el componente y se visualiza como una barra que se extiende a lo largo de todo el gráfico. El valor objetivo es una medida con la que se compara el valor del rendimiento. Se muestra como un pequeño bloque que corre perpendicular a la orientación de la barra de rendimiento.
<igx-bullet-graph
value =50
valueBrush ="DodgerBlue"
valueStrokeThickness =1
valueInnerExtent =0.5
valueOuterExtent =0.65
targetValue =80
targetValueBreadth =10
targetValueBrush ="LimeGreen"
targetValueOutline ="LimeGreen"
targetValueStrokeThickness =1
targetValueInnerExtent =0.3
targetValueOuterExtent =0.85
height ="80px" width ="400px"
minimumValue =0 value =50
maximumValue =100 >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px" width ="400px"
minimumValue =0
maximumValue =100
value =50
valueBrush ="DodgerBlue"
valueStrokeThickness =1
valueInnerExtent =0.5
valueOuterExtent =0.65
targetValue =80
targetValueBreadth =10
targetValueBrush ="LimeGreen"
targetValueOutline ="LimeGreen"
targetValueStrokeThickness =1
targetValueInnerExtent =0.3
targetValueOuterExtent =0.85
scaleBackgroundBrush = "#e5e5e5"
scaleBackgroundOutline = "#e5e5e5"
backingBrush = "#f7f7f7"
backingOutline = "#bfbfbf"
tickStrokeThickness = 1.5 >
</igx-bullet-graph >
</div >
html コピー
Valor destacado
El valor de rendimiento del gráfico de viñetas se puede modificar aún más para mostrar el progreso representado como un valor resaltado. Esto hará que aparezca value
con una opacidad más baja. Un buen ejemplo es si value
es 50 y highlightValue
se establece en 25. Esto representaría un rendimiento del 50%, independientemente de cuál sea el valor de targetValue
. Para habilitar esto, primero establezca highlightValueDisplayMode
en Superposición y, a continuación, aplique a highlightValue
a algo inferior a value
.
<igx-bullet-graph
#bulletGraph
height ="80px"
width ="400px"
value =70
targetValue =90
minimumValue =0
maximumValue =100
interval =10
labelInterval =10
labelExtent =0.025
labelsPreTerminal =0
labelsPostInitial =0
highlightValueDisplayMode ="Overlay"
highlightValue =25 >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
public ngOnInit(): void {
}
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px"
width ="400px"
value =70
targetValue =90
minimumValue =0
maximumValue =100
interval =10
labelInterval =10
labelExtent =0.025
labelsPreTerminal =0
labelsPostInitial =0
highlightValueDisplayMode ="Overlay"
highlightValue =25
>
</igx-bullet-graph >
</div >
html コピー
Rangos comparativos
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.
<igx-bullet-graph
height ="80px" width ="400px"
minimumValue =0 value =80 interval =10
maximumValue =100 targetValue =90
rangeBrushes ="#C62828, #F96232, #FF9800"
rangeOutlines ="#C62828, #F96232, #FF9800" >
<igx-linear-graph-range
startValue =0 endValue =40
innerStartExtent =0.075 innerEndExtent =0.075
outerStartExtent =0.95 outerEndExtent =0.95 >
</igx-linear-graph-range >
<igx-linear-graph-range
startValue =40 endValue =70
innerStartExtent =0.075 innerEndExtent =0.075
outerStartExtent =0.95 outerEndExtent =0.95 >
</igx-linear-graph-range >
<igx-linear-graph-range
startValue =70 endValue =100
innerStartExtent =0.075 innerEndExtent =0.075
outerStartExtent =0.95 outerEndExtent =0.95 >
</igx-linear-graph-range >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px" width ="400px"
minimumValue =0 value =80 interval =10
maximumValue =100 targetValue =90
rangeBrushes ="#C62828, #F96232, #FF9800"
rangeOutlines ="#C62828, #F96232, #FF9800" >
<igx-linear-graph-range
startValue =0 endValue =40
innerStartExtent =0.075 innerEndExtent =0.075
outerStartExtent =0.95 outerEndExtent =0.95 >
</igx-linear-graph-range >
<igx-linear-graph-range
startValue =40 endValue =70
innerStartExtent =0.075 innerEndExtent =0.075
outerStartExtent =0.95 outerEndExtent =0.95 >
</igx-linear-graph-range >
<igx-linear-graph-range
startValue =70 endValue =100
innerStartExtent =0.075 innerEndExtent =0.075
outerStartExtent =0.95 outerEndExtent =0.95 >
</igx-linear-graph-range >
</igx-bullet-graph >
</div >
html コピー
Marcas de verificación
Las marcas sirven como una división visual de la escala en intervalos para aumentar la legibilidad del gráfico de viñetas.
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.
<igx-bullet-graph
height ="80px" width ="400px"
minimumValue =0 value =70
maximumValue =100 targetValue =90
interval =10
tickBrush ="DodgerBlue"
ticksPreTerminal =0
ticksPostInitial =0
tickStrokeThickness =2
tickStartExtent =0.2
tickEndExtent =0.075
minorTickCount =4
minorTickBrush ="DarkViolet"
minorTickEndExtent =0.1
minorTickStartExtent =0.2
minorTickStrokeThickness =1 >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
tickBrush ="DodgerBlue"
ticksPreTerminal =0
ticksPostInitial =0
tickStrokeThickness =2
tickStartExtent =0.2
tickEndExtent =0.075
minorTickCount =4
minorTickBrush ="DarkViolet"
minorTickEndExtent =0.1
minorTickStartExtent =0.2
minorTickStrokeThickness =1 >
</igx-bullet-graph >
</div >
html コピー
Etiquetas
Las etiquetas indican las medidas de la báscula.
<igx-bullet-graph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
labelInterval =10
labelExtent =0.025
labelsPreTerminal =0
labelsPostInitial =0
fontBrush ="DodgerBlue"
font ="11px Verdana" >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
labelInterval =10
labelExtent =0.025
labelsPreTerminal =0
labelsPostInitial =0
fontBrush ="DodgerBlue"
font ="11px Verdana"
>
</igx-bullet-graph >
</div >
html コピー
Apoyo
El elemento de respaldo representa el fondo y el borde del componente del gráfico de viñetas. Siempre es el primer elemento representado y el resto de elementos, como etiquetas y marcas, se superponen encima.
<igx-bullet-graph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
backingBrush ="#bddcfc"
backingOutline ="DodgerBlue"
backingStrokeThickness =4
backingInnerExtent =0
backingOuterExtent =1 >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
backingBrush ="#bddcfc"
backingOutline ="DodgerBlue"
backingStrokeThickness =4
backingInnerExtent =0
backingOuterExtent =1
>
</igx-bullet-graph >
</div >
html コピー
Escala
La escala es un elemento visual que resalta toda la gama de valores del indicador. Puede personalizar la apariencia y la forma de la escala. 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.
<igx-bullet-graph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
isScaleInverted =false
scaleBackgroundBrush ="DodgerBlue"
scaleBackgroundOutline ="DarkViolet"
scaleBackgroundThickness =2
scaleStartExtent =0.05
scaleEndExtent =0.95 >
</igx-bullet-graph >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxBulletGraphModule } from "igniteui-angular-gauges" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxBulletGraphModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxBulletGraphComponent } from "igniteui-angular-gauges" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
@ViewChild ("bulletGraph" , { static : true })
public bulletGraph: IgxBulletGraphComponent;
}
ts コピー <div class ="container vertical" >
<igx-bullet-graph
#bulletGraph
height ="80px" width ="400px"
minimumValue =0 value =70 interval =10
maximumValue =100 targetValue =90
isScaleInverted =false
scaleBackgroundBrush ="DodgerBlue"
scaleBackgroundOutline ="Red"
scaleBackgroundThickness =2
scaleStartExtent =0.05
scaleEndExtent =0.95 >
</igx-bullet-graph >
</div >
html コピー
Resumen
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 gráfico de viñetas con todas las funciones y elementos visuales habilitados.
<igx-bullet-graph
height ="80px" width ="400px"
minimumValue =0
maximumValue =100
isScaleInverted =false
scaleBackgroundBrush ="Gray"
scaleBackgroundOutline ="Gray"
scaleBackgroundThickness =2
scaleStartExtent =0.05
scaleEndExtent =0.95
value =50
valueBrush ="Black"
valueStrokeThickness =1
valueInnerExtent =0.5
valueOuterExtent =0.65
targetValue =80
targetValueBreadth =7.5
targetValueBrush ="Black"
targetValueOutline ="Black"
targetValueStrokeThickness =1
targetValueInnerExtent =0.3
targetValueOuterExtent =0.85
labelInterval =10
labelExtent =0.025
labelsPreTerminal =0
labelsPostInitial =0
fontBrush ="Black"
font ="11px Verdana"
backingBrush ="#cecece"
backingOutline ="#cecece"
backingStrokeThickness =4
backingInnerExtent =0
backingOuterExtent =1
interval =10
tickBrush ="Black"
ticksPreTerminal =0
ticksPostInitial =0
tickStrokeThickness =2
tickStartExtent =0.2
tickEndExtent =0.075
minorTickCount =4
minorTickBrush ="Black"
minorTickEndExtent =0.1
minorTickStartExtent =0.2
minorTickStrokeThickness =1
rangeBrushes ="#C62828, #F96232, #FF9800"
rangeOutlines ="#C62828, #F96232, #FF9800" >
<igx-linear-graph-range
startValue =20 endValue =40
innerStartExtent =0.25 innerEndExtent =0.25
outerStartExtent =0.9 outerEndExtent =0.9 >
</igx-linear-graph-range >
<igx-linear-graph-range
startValue =40 endValue =60
innerStartExtent =0.25 innerEndExtent =0.25
outerStartExtent =0.9 outerEndExtent =0.9 >
</igx-linear-graph-range >
<igx-linear-graph-range
startValue =60 endValue =90
innerStartExtent =0.25 innerEndExtent =0.25
outerStartExtent =0.9 outerEndExtent =0.9 >
</igx-linear-graph-range >
</igx-bullet-graph >
html
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
Recursos adicionales
Puede encontrar más información sobre otros tipos de medidores en estos temas: