Angular 선형 계기 개요

    Ignite UI for Angular 선형 게이지 구성 요소를 사용하면 선형 게이지 형태로 데이터를 시각화할 수 있습니다. IgxLinearGaugeComponent는 값과 스케일 및 하나 이상의 범위를 비교한 간단하고 간결한 뷰를 제공합니다. 하나의 스케일, 하나의 눈금 표시 세트 및 하나의 레이블 세트를 지원합니다. 이 구성 요소에는 애니메이션 전환에 대한 기본 제공 지원도 있습니다. 이 애니메이션은 transitionDuration 속성을 설정하여 쉽게 사용자 정의할 수 있습니다. 선형 게이지 구성 요소의 기능에는 구성 가능한 방향 및 방향, 바늘과 같은 구성 가능한 시각적 요소 등이 있습니다.

    Angular 선형 계기 예

    다음 샘플은 동일한 IgxLinearGaugeComponent에 여러 속성을 설정하여 이를 완전히 다른 선형 게이지로 변환하는 방법을 보여줍니다.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    종속성

    Angular 게이지 구성 요소를 설치할 때 핵심 패키지도 설치해야 합니다.

    npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
cmd

    컴포넌트 모듈

    ​IgxLinearGaugeComponent 에는 다음 모듈이 필요합니다.

    // app.module.ts
import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';

@NgModule({
    imports: [
        // ...
        IgxLinearGaugeModule
        // ...
    ]
})
export class AppModule {}
ts

    용법

    다음 코드는 바늘과 눈금의 세 가지 비교 범위를 포함하는 선형 게이지를 만드는 방법을 보여줍니다.

     <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>
html
    App Builder | CTA 배너

    바늘

    이는 선형 게이지 구성 요소에 의해 표시되는 기본 측정값이며 막대로 시각화되거나 아래에 설명된 대로 거의 모든 모양을 표시하도록 사용자 정의할 수 있습니다.

     <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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    하이라이트 바늘

    선형 게이지는 두 번째 바늘을 표시하도록 수정할 수 있습니다. 이렇게 하면 주 바늘이 value 더 낮은 불투명도로 나타납니다. 이 기능을 사용하려면 먼저 오버레이로 설정한 highlightValueDisplayMode 다음 a highlightValue를 적용합니다.

    <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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    범위

    범위는 눈금에서 지정된 값 범위를 강조 표시하는 시각적 요소입니다. 그 목적은 성능 막대 측정값의 질적 상태를 시각적으로 전달하는 동시에 해당 상태 내에 있는 정도를 보여주는 것입니다.

    <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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    눈금 표시

    눈금 표시는 선형 게이지의 가독성을 높이기 위해 눈금을 간격으로 시각적으로 나누는 역할을 합니다.

    주요 눈금 표시 – 주요 눈금 표시는 눈금의 기본 구분 기호로 사용됩니다. 나타나는 빈도, 범위 및 스타일은 해당 속성을 설정하여 제어할 수 있습니다.

    보조 눈금 표시 – 보조 눈금 표시는 눈금의 가독성을 추가로 향상시키는 데 사용될 수 있고 주요 눈금과 유사한 방식으로 사용자 정의할 수 있는 보조 눈금 표시를 나타냅니다.

    <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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    레이블

    레이블은 척도의 측정값을 나타냅니다.

    <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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    역행

    뒷면 요소는 선형 게이지 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 레이블 및 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.

    <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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    규모

    눈금은 선형 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 눈금의 모양과 모양을 사용자 정의할 수 있습니다. 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>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    요약

    편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 선형 게이지를 볼 수 있습니다.

    <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>
html

    API 참조

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.

    추가 리소스

    다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.