Angular 선형 계기 개요
Ignite UI for Angular 선형 게이지 성분은 선형 게이지 형태로 데이터를 시각화할 수 있게 해줍니다. 이 도구는IgxLinearGaugeComponent 척도와 하나 이상의 범위와 비교한 값을 간단하고 간결하게 보여줍니다. 하나의 척도, 하나의 체크 표시 세트, 그리고 하나의 라벨 세트를 지원합니다. 이 컴포넌트는 애니메이션 전환 기능도 내장되어 있습니다. 이 애니메이션은 속성을 설정transitionDuration 하여 쉽게 커스터마이즈할 수 있습니다. 선형 게이지 구성 요소에는 설정 가능한 방향과 방향, 바늘과 같은 설정 가능한 시각적 요소 등이 포함됩니다.
Angular Linear Gauge Example
다음 샘플은 여러 속성을 동일IgxLinearGaugeComponent 하게 설정하면 완전히 다른 선형 게이지로 변환되는 과정을 보여줍니다.
Dependencies
Angular 게이지 구성 요소를 설치할 때 핵심 패키지도 설치해야 합니다.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
Component Modules
다음IgxLinearGaugeComponent 모듈들이 필요합니다:
// app.module.ts
import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
@NgModule({
imports: [
// ...
IgxLinearGaugeModule
// ...
]
})
export class AppModule {}
Usage
다음 코드는 바늘과 눈금의 세 가지 비교 범위를 포함하는 선형 게이지를 만드는 방법을 보여줍니다.
<igx-linear-gauge width="700px"
height="30px"
minimumValue = "5"
maximumValue = "55"
value = "43">
<igx-linear-graph-range startValue="0"
endValue="15"
brush="red">
</igx-linear-graph-range>
<igx-linear-graph-range startValue="15"
endValue="30"
brush="yellow">
</igx-linear-graph-range>
<igx-linear-graph-range startValue="30"
endValue="55"
brush="green">
</igx-linear-graph-range>
</igx-linear-gauge>
Needle
이는 선형 게이지 구성 요소에 의해 표시되는 기본 측정값이며 막대로 시각화되거나 아래에 설명된 대로 거의 모든 모양을 표시하도록 사용자 정의할 수 있습니다.
<igx-linear-gauge
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>
</igx-linear-gauge>
Highlight Needle
선형 게이지는 두 번째 바늘을 표시하도록 수정할 수 있습니다. 이렇게 하면 메인 바늘value이 불투명도가 낮아져 보입니다. 이 기능을 활성화하려면 먼저 오버레이로 설정highlightValueDisplayMode 한 후 ahighlightValue를 적용하세요.
<igx-linear-gauge
#linearGauge
height="80px"
width="400px"
value=70
minimumValue=0
maximumValue=100
interval=10
labelInterval=10
labelExtent=0.025
labelsPreTerminal=0
labelsPostInitial=0
needleBrush="Blue"
highlightValueDisplayMode="Overlay"
highlightValue=25
isHighlightNeedleDraggingEnabled=true>
</igx-linear-gauge>
Ranges
범위는 눈금에서 지정된 값 범위를 강조 표시하는 시각적 요소입니다. 그 목적은 성능 막대 측정값의 질적 상태를 시각적으로 전달하는 동시에 해당 상태 내에 있는 정도를 보여주는 것입니다.
<igx-linear-gauge
height="80px" width="400px"
minimumValue=0 value=50
maximumValue=100 interval=10
rangeBrushes="#a4bd29, #F86232"
rangeOutlines="#a4bd29, #F86232" >
<igx-linear-graph-range
startValue=0 endValue=50
innerStartExtent=0.075 innerEndExtent=0.075
outerStartExtent=0.25 outerEndExtent=0.4>
</igx-linear-graph-range>
<igx-linear-graph-range
startValue=50 endValue=100
innerStartExtent=0.075 innerEndExtent=0.075
outerStartExtent=0.4 outerEndExtent=0.55>
</igx-linear-graph-range>
</igx-linear-gauge>
Tick Marks
눈금 표시는 선형 게이지의 가독성을 높이기 위해 눈금을 간격으로 시각적으로 나누는 역할을 합니다.
주요 눈금 표시 – 주요 눈금 표시는 눈금의 기본 구분 기호로 사용됩니다. 나타나는 빈도, 범위 및 스타일은 해당 속성을 설정하여 제어할 수 있습니다.
보조 눈금 표시 – 보조 눈금 표시는 눈금의 가독성을 추가로 향상시키는 데 사용될 수 있고 주요 눈금과 유사한 방식으로 사용자 정의할 수 있는 보조 눈금 표시를 나타냅니다.
<igx-linear-gauge
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>
</igx-linear-gauge>
Labels
레이블은 척도의 측정값을 나타냅니다.
<igx-linear-gauge
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">
</igx-linear-gauge>
Backing
뒷면 요소는 선형 게이지 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 레이블 및 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.
<igx-linear-gauge
height="80px" width="400px"
minimumValue=0 value=50
maximumValue=100 interval=10
backingBrush="#bddcfc"
backingOutline="DodgerBlue"
backingStrokeThickness=4
backingInnerExtent=0
backingOuterExtent=1>
</igx-linear-gauge>
Scale
이 눈금은 선형 게이지의 전체 값을 강조하는 시각적 요소입니다. 외형과 스케일의 모양을 커스터마이즈할 수 있습니다. 또한 속성을 이용isScaleInverted 해 역전할 수도 있으며, 모든 라벨이 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 렌더링됩니다.
<igx-linear-gauge
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>
</igx-linear-gauge>
Summary
편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 선형 게이지를 볼 수 있습니다.
<igx-linear-gauge
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">
<igx-linear-graph-range
startValue=0 endValue=50
innerStartExtent=0.075 innerEndExtent=0.075
outerStartExtent=0.25 outerEndExtent=0.4>
</igx-linear-graph-range>
<igx-linear-graph-range
startValue=50 endValue=100
innerStartExtent=0.075 innerEndExtent=0.075
outerStartExtent=0.4 outerEndExtent=0.55>
</igx-linear-graph-range>
</igx-linear-gauge>
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
Additional Resources
다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.
GitHub