Angular 불릿 그래프 개요

    Angular Bullet 그래프 구성 요소를 사용하면 척도와 비교하여 측정값을 선형적이고 간결하게 볼 수 있습니다.

    Ignite UI for Angular 매력적인 데이터 프레젠테이션을 생성하고 대시보드에서 사용되는 미터와 게이지를 간단하면서도 명확하고 명확한 막대 차트로 대체하는 기능을 제공합니다. 불릿 그래프는 목표, 양호/양호/최상의 범위에 대한 진행 상황을 표시하거나 가능한 한 작은 수평 또는 수직 공간에서 여러 측정값을 비교하는 가장 효과적이고 효율적인 방법 중 하나입니다.

    Angular Bullet Graph Example

    다음 샘플은 동일한 IgxBulletGraphComponent에 여러 속성을 설정하여 이를 완전히 다른 글머리 기호 그래프로 변환하는 방법을 보여줍니다.

    글머리 기호 그래프는 하나의 눈금, 하나의 눈금 세트 및 하나의 레이블 세트를 지원합니다. 글머리 기호 그래프 구성 요소에는 애니메이션 전환에 대한 지원도 내장되어 있습니다. 이 애니메이션은 transitionDuration 속성을 설정하여 쉽게 사용자 정의할 수 있습니다. 글머리 기호 그래프의 기능에는 구성 가능한 방향 및 방향, 바늘과 같은 구성 가능한 시각적 요소 등이 포함됩니다.

    Dependencies

    게이지 패키지를 설치할 때 코어 패키지도 설치해야 합니다.

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

    Component Modules

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

    // app.module.ts
    import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
    
    @NgModule({
        imports: [
            // ...
            IgxBulletGraphModule
            // ...
        ]
    })
    export class AppModule {}
    

    Usage

    다음 코드는 글머리 기호 그래프 구성 요소를 만들고, 성과 막대, 비교 측정값 표식, 척도의 세 가지 비교 범위를 구성하는 과정을 안내합니다.

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

    Comparative Measures

    글머리 기호 그래프는 성과 값과 목표 값이라는 두 가지 측정값을 표시할 수 있습니다.

    성능 값은 구성 요소에 의해 표시되는 기본 측정값이며 전체 그래프의 길이를 따라 늘어나는 막대로 시각화됩니다. 목표값은 성과값을 비교하는 척도이다. 성능 표시줄 방향에 수직으로 실행되는 작은 블록으로 표시됩니다.

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

    Comparative Ranges

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

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

    Tick Marks

    눈금 표시는 글머리 기호 그래프의 가독성을 높이기 위해 척도를 간격으로 시각적으로 나누는 역할을 합니다.

    • 주요 눈금 표시 – 주요 눈금 표시는 눈금의 기본 구분 기호로 사용됩니다. 나타나는 빈도, 범위 및 스타일은 해당 속성을 설정하여 제어할 수 있습니다.
    • 보조 눈금 표시 – 보조 눈금 표시는 눈금의 가독성을 추가로 향상시키는 데 사용될 수 있고 주요 눈금과 유사한 방식으로 사용자 정의할 수 있는 보조 눈금 표시를 나타냅니다.
    <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>
    

    Labels

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

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

    Backing

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

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

    Scale

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

    Summary

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

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

    API References

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

    Additional Resources

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