Angular 방사형 게이지 개요

    Angular 방사형 게이지 구성 요소는 미리 정의된 모양과 크기를 만들기 위해 바늘, 눈금, 범위 및 레이블과 같은 여러 시각적 요소를 제공합니다. IgxRadialGaugeComponent는 애니메이션 전환에 대한 기본 제공 지원도 제공합니다. 이 애니메이션은 transitionDuration 속성을 설정하여 쉽게 사용자 정의할 수 있습니다.

    Angular 방사형 게이지 예

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    종속성

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

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

    컴포넌트 모듈

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

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

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

    용법

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

     <igx-radial-gauge height="400px" width="400px"
    value="25"
    interval="5"
    minimumValue="0"
    maximumValue="100">
    <igx-radial-gauge-range startValue="0"
                            endValue="30"
                            brush="red">
    </igx-radial-gauge-range>
    <igx-radial-gauge-range startValue="30"
                            endValue="60"
                            brush="yellow">
    </igx-radial-gauge-range>
    <igx-radial-gauge-range startValue="60"
                            endValue="100"
                            brush="green">
    </igx-radial-gauge-range>
</igx-radial-gauge>
html

    역행

    방사형 게이지 구성 요소는 방사형 게이지의 배경 역할을 하는 눈금 뒤에 그려진 뒷면 모양과 함께 제공됩니다.

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

    뒷면은 원형이거나 장착될 수 있습니다. 원형 모양은 360도 원형 게이지를 생성하는 반면, 맞춤 모양은 scaleStartAngle 및 scaleEndAngle 속성을 둘러싸는 채워진 호 세그먼트를 생성합니다. 이는 backingShape 속성을 설정하여 설정할 수 있습니다.

    <igx-radial-gauge
    backingShape="Fitted"
    backingBrush="#fcfcfc"
    backingOutline="DodgerBlue"
    backingOversweep=5
    backingCornerRadius=10
    backingStrokeThickness=5
    backingOuterExtent=0.8
    backingInnerExtent=0.15
    scaleStartAngle=135 scaleEndAngle=45
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10>
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    규모

    눈금은 minimumValue 및 maximumValue 값을 제공하여 생성할 수 있는 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 백킹과 함께 게이지의 전체적인 모양을 정의합니다. scaleStartAngle 및 scaleEndAngle 속성은 눈금의 호 경계를 정의합니다. 반면, scaleSweepDirection 속성은 눈금이 시계 방향 또는 시계 반대 방향으로 스윕할지 여부를 지정합니다. scaleBrush, scaleStartExtent 및 scaleEndExtent 속성을 설정하여 배율의 모양을 사용자 정의할 수 있습니다.

    <igx-radial-gauge
    scaleStartAngle=135
    scaleEndAngle=45
    scaleBrush="DodgerBlue"
    scaleSweepDirection="Clockwise"
    scaleOversweep=1
    scaleOversweepShape="Fitted"
    scaleStartExtent=0.45
    scaleEndExtent=0.575
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10>
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    레이블과 제목

    방사형 게이지 레이블은 minimumValue과 maximumValue 속성 값 사이의 지정된 간격으로 숫자 값을 표시하는 시각적 요소입니다. labelExtent 속성을 분수로 설정하여 레이블 위치를 지정할 수 있습니다. 여기서 0은 게이지 중심을 나타내고 1은 게이지 뒷면의 외부 범위를 나타냅니다. 또한, fontBrush 및 font과 같은 다양한 스타일 속성을 설정하여 레이블을 사용자 정의할 수 있습니다.

    바늘에 대한 이러한 각 레이블에는 글꼴, 각도, 브러시 및 게이지 중심으로부터의 거리를 변경하는 데 적용할 수 있는 다양한 스타일 속성이 있습니다(예: titleExtent, titleAngle, SubtitleFontSize,, highlightLabelBrush).

    <igx-radial-gauge
    labelExtent=0.65
    labelInterval=10
    font="11px Verdana"
    fontBrush="DodgerBlue"
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=100 interval=10>
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    제목 & 부제목

    titleText 속성을 subtitleText 사용할 수 있으며 둘 다 바늘에 대한 사용자 정의 텍스트를 표시하는 데 사용할 수 있습니다. 또는 and subtitleDisplaysValue를 titleDisplaysValue true로 설정하면 바늘의 값을 표시하고 and subtitleText를 재정의 titleText 합니다. 따라서 제목에 대한 사용자 정의 텍스트를 사용할 수 있지만 자막을 통해 값을 표시하거나 그 반대의 경우도 마찬가지입니다.

    아래 설명과 같이 강조 표시 바늘이 표시되면 다음을 통해 highlightLabelText 사용자 정의 텍스트를 표시할 수 있으며, 그렇지 않으면 highlightLabelDisplaysValue 활성화하고 해당 값을 표시할 수 있습니다.

    <igx-radial-gauge
    titleText="Global Sales"
    subtitleText="2024">
</igx-radial-gauge>
html

    옵티컬 스케일링

    방사형 게이지의 레이블과 제목은 배율을 변경할 수 있습니다. 이 기능을 사용하려면 먼저 true로 설정합니다 opticalScalingEnabled. 그런 다음 레이블이 100% 광학 배율을 갖는 크기를 관리하는 항목을 설정할 opticalScalingSize 수 있습니다. 레이블은 게이지의 크기가 더 클 때 더 큰 글꼴을 갖습니다. 예를 들어, 이 속성이 500으로 설정되고 게이지 px 크기가 예를 들어 두 배가 되면 레이블의 글꼴 크기가 200% 더 커집니다. 1000.

    EXAMPLE
    app.module.ts
    app.module.ts
    app.component.ts
    app.component.ts
    app.component.html
    app.component.html
    app.component.scss
    app.component.scss
    Edit in:

    눈금 표시

    눈금 표시는 방사형 게이지의 중심에서 방사되는 가는 선입니다. 눈금 표시에는 메이저와 마이너의 두 가지 유형이 있습니다. 주요 눈금 표시는 minimumValue 속성과 maximumValue 속성 사이의 interval으로 표시됩니다. 각 주요 눈금 사이에 표시되는 보조 눈금 수를 지정하려면 minorTickCount 속성을 사용하십시오. tickStartExtent, tickEndExtent, minorTickStartExtent 및 minorTickEndExtent 속성에 분수(0과 1 사이)를 설정하여 눈금 표시의 길이를 제어할 수 있습니다.

    <igx-radial-gauge
    tickStartExtent=0.45
    tickEndExtent=0.575
    tickStrokeThickness=2
    tickBrush="DodgerBlue"
    minorTickCount=4
    minorTickEndExtent=0.5
    minorTickStartExtent=0.575
    minorTickStrokeThickness=1
    minorTickBrush="DarkViolet"
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10>
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    범위

    범위는 지정된 minimumValue 및 maximumValue 속성으로 묶인 연속 값 집합을 강조표시합니다. 시작 및 끝 값을 지정하여 방사형 게이지에 여러 범위를 추가할 수 있습니다. 각 범위에는 brush 및 outline과 같은 몇 가지 사용자 정의 속성이 있습니다. 또는 rangeBrushes 및 rangeOutlines 속성을 범위의 색상 목록으로 설정할 수 있습니다.

    <igx-radial-gauge
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10
    rangeBrushes ="red, yellow, green"
    rangeOutlines="red, yellow, green">
   <igx-radial-gauge-range
       startValue=5  endValue=15 brush="red">
   </igx-radial-gauge-range>
   <igx-radial-gauge-range
       startValue=15  endValue=35 brush="yellow">
   </igx-radial-gauge-range>
   <igx-radial-gauge-range
       startValue=35  endValue=45 brush="green">
   </igx-radial-gauge-range>
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    바늘

    방사형 게이지 바늘은 게이지 설정 값을 나타내는 데 사용되는 시각적 요소입니다. 바늘은 미리 정의된 여러 모양 중 하나로 제공됩니다. 바늘은 게이지 중앙에 위치하는 피벗 모양을 가질 수 있습니다. 또한 피벗 모양은 미리 정의된 모양 중 하나를 사용합니다. 오버레이 또는 언더레이를 포함하는 피벗 모양에는 모양에 적용되는 별도의 피벗 브러시가 있을 수 있습니다.

    지원되는 바늘 모양과 캡은 needleShape 및 needlePivotShape 속성을 사용하여 설정됩니다.

    ​isNeedleDraggingEnabled 속성을 사용하여 게이지의 대화형 모드를 활성화할 수 있으며 최종 사용자는 minimumValue과 maximumValue 속성 사이의 바늘을 끌어 값을 변경할 수 있습니다.

    <igx-radial-gauge
    value=50
    isNeedleDraggingEnabled=true
    isNeedleDraggingConstrained=true
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent=0.475
    needleStrokeThickness=1
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio=0.2
    needlePivotStrokeThickness=1
    height="300px" width="300px"
    minimumValue=0
    maximumValue=80 interval=10>
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    하이라이트 바늘

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

    <igx-radial-gauge #radialGauge
    labelExtent=0.65
    labelInterval=10
    highlightValueDisplayMode="Overlay"
    highlightValue=50
    highlightLabelDisplaysValue=true
    highlightLabelSnapsToNeedlePivot=true
    isHighlightNeedleDraggingEnabled=true
    height="100%" width="100%"
    minimumValue=0 value=30
    maximumValue=100 interval=10  >
</igx-radial-gauge>
html

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    요약

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

    <igx-radial-gauge
    height="300px" width="300px"
    minimumValue=0
    maximumValue=80
    scaleStartAngle=135
    scaleEndAngle=45
    scaleBrush="#c6c6c6"
    scaleSweepDirection="Clockwise"
    scaleOversweep=1
    scaleOversweepShape="Fitted"
    scaleStartExtent=0.45
    scaleEndExtent=0.575

    value=70
    isNeedleDraggingEnabled=true
    isNeedleDraggingConstrained=true
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent=0.475
    needleStrokeThickness=1
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio=0.2
    needlePivotStrokeThickness=1

    interval=10
    tickStartExtent=0.45
    tickEndExtent=0.575
    tickStrokeThickness=2
    tickBrush="Black"
    minorTickCount=4
    minorTickEndExtent=0.5
    minorTickStartExtent=0.575
    minorTickStrokeThickness=1
    minorTickBrush="Black"

    labelExtent=0.65
    labelInterval=10
    font="11px Verdana"
    fontBrush="Black"

    backingShape="Fitted"
    backingBrush="#ededed"
    backingOutline="Gray"
    backingOversweep=5
    backingCornerRadius=10
    backingStrokeThickness=5
    backingOuterExtent=0.8
    backingInnerExtent=0.15

    rangeBrushes ="#a4bd29, #F86232"
    rangeOutlines="#a4bd29, #F86232">
    <igx-radial-gauge-range
        startValue=20 endValue=40
        innerStartExtent=0.45 innerEndExtent=0.45
        outerStartExtent=0.57 outerEndExtent=0.57>
    </igx-radial-gauge-range>
    <igx-radial-gauge-range
        startValue=40 endValue=60
        innerStartExtent=0.45 innerEndExtent=0.45
        outerStartExtent=0.57 outerEndExtent=0.57>
    </igx-radial-gauge-range>
</igx-radial-gauge>
html

    API 참조

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

    추가 리소스

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