Angular 총알 그래프 개요
Angular 불릿 그래프 구성 요소를 사용하면 척도와 비교하여 측정값을 선형적이고 간결하게 볼 수 있습니다.
Ignite UI for Angular 대시보드에서 사용되는 미터와 게이지를 간단하면서도 직관적이고 명확한 막대 차트로 대체하여 매력적인 데이터 프레젠테이션을 만들 수 있는 기능을 제공합니다. Bullet Graph는 목표에 대한 진행 상황, 양호/더 좋음/최고 범위를 표시하거나 가능한 한 적은 수평 또는 수직 공간에서 여러 측정값을 비교하는 가장 효과적이고 효율적인 방법 중 하나입니다.
Angular 총알 그래프 예제
다음 샘플은 동일한 IgxBulletGraphComponent
에 여러 속성을 설정하여 이를 완전히 다른 글머리 기호 그래프로 변환하는 방법을 보여줍니다.
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 コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
글머리 기호 그래프는 하나의 눈금, 하나의 눈금 세트 및 하나의 레이블 세트를 지원합니다. 글머리 기호 그래프 구성 요소에는 애니메이션 전환에 대한 지원도 내장되어 있습니다. 이 애니메이션은 transitionDuration
속성을 설정하여 쉽게 사용자 정의할 수 있습니다. 글머리 기호 그래프의 기능에는 구성 가능한 방향 및 방향, 바늘과 같은 구성 가능한 시각적 요소 등이 포함됩니다.
종속성
게이지 패키지를 설치할 때 코어 패키지도 설치해야 합니다.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
cmd
컴포넌트 모듈
IgxBulletGraphComponent
에는 다음 모듈이 필요합니다.
import { IgxBulletGraphModule } from 'igniteui-angular-gauges' ;
@NgModule ({
imports : [
IgxBulletGraphModule
]
})
export class AppModule {}
ts
용법
다음 코드는 글머리 기호 그래프 구성 요소를 만들고, 성과 막대, 비교 측정값 표식, 척도의 세 가지 비교 범위를 구성하는 과정을 안내합니다.
<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
비교 측정
글머리 기호 그래프는 성과 값과 목표 값이라는 두 가지 측정값을 표시할 수 있습니다.
성능 값은 구성 요소에 의해 표시되는 기본 측정값이며 전체 그래프의 길이를 따라 늘어나는 막대로 시각화됩니다. 목표값은 성과값을 비교하는 척도이다. 성능 표시줄 방향에 수직으로 실행되는 작은 블록으로 표시됩니다.
<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 コピー
강조 표시 값
불릿 그래프의 성능 값을 추가로 수정하여 강조 표시된 값으로 표시되는 진행률을 표시할 수 있습니다. 이렇게 하면 불 value
투명도가 낮아 보입니다. 좋은 예는 if가 50이고 highlightValue
25로 설정된 경우 value
입니다. 이는 값이 targetValue
설정된 내용에 관계없이 50%의 성능을 나타냅니다. 이를 활성화하려면 먼저 오버레이로 설정한 highlightValueDisplayMode
다음 다음보다 value
낮은 항목에 a highlightValue
를 적용합니다.
<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 コピー
비교 범위
범위는 눈금에서 지정된 값 범위를 강조 표시하는 시각적 요소입니다. 그 목적은 성능 막대 측정값의 질적 상태를 시각적으로 전달하는 동시에 해당 상태 내에 있는 정도를 보여주는 것입니다.
<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 コピー
눈금 표시
눈금 표시는 글머리 기호 그래프의 가독성을 높이기 위해 척도를 간격으로 시각적으로 나누는 역할을 합니다.
주요 눈금 표시 – 주요 눈금 표시는 눈금의 기본 구분 기호로 사용됩니다. 나타나는 빈도, 범위 및 스타일은 해당 속성을 설정하여 제어할 수 있습니다.
보조 눈금 표시 – 보조 눈금 표시는 눈금의 가독성을 추가로 향상시키는 데 사용될 수 있고 주요 눈금과 유사한 방식으로 사용자 정의할 수 있는 보조 눈금 표시를 나타냅니다.
<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 コピー
레이블
레이블은 척도의 측정값을 나타냅니다.
<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 コピー
역행
뒷면 요소는 글머리 기호 그래프 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 레이블 및 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.
<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 コピー
규모
눈금은 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 눈금의 모양과 모양을 사용자 정의할 수 있습니다. isScaleInverted
속성을 사용하여 배율을 반전할 수도 있으며 모든 레이블은 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 렌더링됩니다.
<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 コピー
요약
귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 글머리 기호 그래프를 볼 수 있습니다.
<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
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
추가 리소스
다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.