Angular 방사형 게이지 개요

The Angular radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. The IgxRadialGaugeComponent also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property.

Angular Radial Gauge Example

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

Dependencies

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

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

Component Modules

다음IgxRadialGaugeComponent 모듈들이 필요합니다:

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

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

Usage

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

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

Backing

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

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

뒷면은 원형이거나 맞춤형일 수 있습니다. 원형 도형은 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>

Scale

이 눈금은 게이지 내 모든 값을 표시하는 시각적 요소로, 이minimumValue 값을 공급maximumValue 하여 생성할 수 있습니다. 뒷면과 함께 게이지의 전체 형태를 정의합니다. 와scaleStartAngle 성질은scaleEndAngle 스케일의 호의 경계를 정의한다. 반면, 이scaleSweepDirection 속성은 눈금이 시계 방향인지 반시계 방향으로 스윕하는지를 지정합니다. 설정scaleBrushscaleStartExtentscaleEndExtent, 속성으로 스케일의 외관을 커스터마이즈할 수 있습니다.

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

Labels and Titles

방사형 게이지 라벨은 그리고minimumValue 속성 값maximumValue 사이의 지정된 간격에 숫자 값을 표시하는 시각적 요소입니다. 라벨을 위치시키는 방법은 0이 게이지 중심, 1이 게이지 뒷면의 바깥쪽 범위를 나타내는 비율로 설정labelExtent 하면 됩니다. 또한, 레이블을 커스터마이즈하여 다양한 스타일링 속성을 설정할 수 있습니다.fontBrushfont

바늘의 각 라벨에는 글꼴, 각도, 브러시, 게이지titleExtenttitleAngleSubtitleFontSizehighlightLabelBrush 중심부터의 거리 등을 변경할 수 있는 다양한 스타일링 속성을 적용할 수 있습니다.

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

Title & Subtitle

titleText그리고subtitleText 속성도 제공되며, 두 경우 모두 바늘에 대한 맞춤 텍스트를 표시하는 데 사용할 수 있습니다. 또는titleDisplaysValue truesubtitleDisplaysValue로 설정하면 바늘의 값을 표시하고 andtitleText를 덮어subtitleText 쓰게 합니다. 그래서 제목은 맞춤 텍스트를 차지하되 값을 부제목으로 표시하거나, 그 반대도 가능합니다.

아래에서 설명한 것처럼 하이라이트 바늘이 표시되면 맞춤 텍스트를 표시highlightLabelText 할 수 있고, 그렇지 않으면highlightLabelDisplaysValue 활성화되어 값을 표시할 수 있습니다.

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

Optical Scaling

방사형 게이지의 라벨과 제목은 스케일링을 바꿀 수 있습니다. 이를 활성화하려면 먼저 true로 설정opticalScalingEnabled 하세요. 그 다음에는 라벨이 100% 광학 스케일링을 하는 크기를 관리하는 설정을 할 수 있습니다opticalScalingSize. 게이지 크기가 클수록 라벨의 글꼴도 더 커집니다. 예를 들어, 라벨의 글꼴 크기는 500으로 설정하고 게이지 px 크기를 두 배로 늘릴 때 200% 더 커집니다. 1000.

Tick Marks

틱 마크는 방사형 게이지 중심에서 방사형으로 뻗은 얇은 선입니다. 틱마크에는 두 가지 유형이 있습니다: 메이저와 마이너. 주요 체크 표시는 부동산interval과 부동산 사이에minimumValue 표시됩니다maximumValue. 각 주요 틱 표시 사이에 표시되는 소 틱 표시 수를 지정하는minorTickCount 속성 사용. 틱 표시의 길이는 0과 1 사이의 비율을 설정하여 property에tickStartExtenttickEndExtentminorTickStartExtentminorTickEndExtent 조절할 수 있습니다.

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

Ranges

범위는 지정된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>

Needle

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

지원되는 바늘 모양과 캡은 andneedleShape 속성으로needlePivotShape 설정됩니다.

게이지의 인터랙티브 모드(property를 사용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>

Highlight Needle

방사형 게이지는 두 번째 바늘을 표시하도록 수정할 수 있습니다. 이렇게 하면 메인 바늘value이 불투명도가 낮아져 보입니다. 이 기능을 활성화하려면 먼저 오버레이로 설정highlightValueDisplayMode 한 후 ahighlightValue를 적용하세요.

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

Summary

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

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

API References

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

Additional Resources

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