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
The following sample demonstrates how setting multiple properties on the same IgxRadialGaugeComponent can transform it to completely different radial gauge.
Dependencies
게이지 구성요소를 설치할 때 코어 패키지도 설치해야 합니다.
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
Component Modules
The IgxRadialGaugeComponent requires the following modules:
// 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
방사형 게이지 구성 요소는 방사형 게이지의 배경 역할을 하는 눈금 뒤에 그려진 뒷면 모양과 함께 제공됩니다.
뒷면 요소는 방사형 게이지 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 바늘, 레이블, 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.
The backing can be circular or fitted. A circular shape creates a 360 degree circle gauge while a fitted shape creates a filled arc segment encompassing the scaleStartAngle and scaleEndAngle properties. This can be set by setting the backingShape property.
<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
The scale is visual element that highlights full range of values in the gauge which can be created by supplying minimumValue and maximumValue values. Together with backing, it defines overall shape of gauge. The scaleStartAngle and scaleEndAngle properties define bounds of arc of the scale. While, the scaleSweepDirection property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting scaleBrush, scaleStartExtent, and scaleEndExtent properties.
<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
The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the minimumValue and maximumValue properties. You can position labels by setting the labelExtent property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as fontBrush and font.
Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as 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>
Title & Subtitle
titleText and subtitleText properties are available and can both be used to display custom text for the needle. Alternatively, titleDisplaysValue and subtitleDisplaysValue, when set to true, will let display the needle's value and override titleText and subtitleText. So you can occupy custom text for the title but show the value via the subtitle and vice versa.
If the highlight needle is shown, as explained below, then custom text can be shown via highlightLabelText, otherwise highlightLabelDisplaysValue can be enabled and display it's value.
<igx-radial-gauge
titleText="Global Sales"
subtitleText="2024">
</igx-radial-gauge>
Optical Scaling
The radial gauge's labels and titles can change it's scaling. To enable this, first set opticalScalingEnabled to true. Then you can set opticalScalingSize which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000.
Tick Marks
Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the interval between the minimumValue and maximumValue properties. Use the minorTickCount property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to tickStartExtent, tickEndExtent, minorTickStartExtent, and minorTickEndExtent properties.
<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
A range highlights a set of continuous values bound by a specified minimumValue and maximumValue properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as brush and outline. Alternatively, you can set rangeBrushes and rangeOutlines properties to a list of colors for the ranges.
<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
방사형 게이지 바늘은 게이지 설정 값을 나타내는 데 사용되는 시각적 요소입니다. 바늘은 미리 정의된 여러 모양 중 하나로 제공됩니다. 바늘은 게이지 중앙에 위치하는 피벗 모양을 가질 수 있습니다. 또한 피벗 모양은 미리 정의된 모양 중 하나를 사용합니다. 오버레이 또는 언더레이를 포함하는 피벗 모양에는 모양에 적용되는 별도의 피벗 브러시가 있을 수 있습니다.
The supported needle shapes and caps are set using the needleShape and needlePivotShape properties.
You can enable an interactive mode of the gauge (using isNeedleDraggingEnabled property) and the end-user will be able to change value by dragging the needle between values of minimumValue and maximumValue properties.
<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
The radial gauge can be modified to show a second needle. This will make the main needle's value appear with a lower opacity. To enable this first set highlightValueDisplayMode to Overlay and then apply 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>
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
다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.
GitHub