Web Components Bullet Graph 개요
Web Components 글머리 기호 그래프 구성 요소를 사용하면 척도와 비교하여 측정값을 선형적이고 간결하게 볼 수 있습니다.
Ignite UI for Web Components 불릿 그래프 구성 요소는 대시보드에서 사용되는 미터와 게이지를 간단하면서도 직관적이고 명확한 막대 차트로 대체하여 매력적인 데이터 프레젠테이션을 만들 수 있는 기능을 제공합니다. 불릿 그래프는 목표에 대한 진행 상황, 양호/더 좋음/최상의 범위를 표시하거나 가능한 한 적은 수평 또는 수직 공간에서 여러 측정값을 비교하는 가장 효과적이고 효율적인 방법 중 하나입니다.
Web Components Bullet Graph Example
다음 샘플은 여러IgcBulletGraphComponent 속성을 동일하게 설정하면 완전히 다른 불릿 그래프로 변환되는 과정을 보여줍니다.
불릿 그래프는 하나의 척도, 한 세트의 틱 표시, 한 세트의 라벨을 지원합니다. 불릿 그래프 구성 요소는 애니메이션 전환 기능도 내장되어 있습니다. 이 애니메이션은 속성을 설정transitionDuration 하여 쉽게 커스터마이즈할 수 있습니다. 불릿 그래프의 특징에는 설정 가능한 방향과 방향, 바늘과 같은 시각 요소 등 다양한 요소가 포함됩니다.
Dependencies
게이지 패키지를 설치할 때 코어 패키지도 설치해야 합니다.
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges
Component Modules
다음IgcBulletGraphComponent 모듈들이 필요합니다:
import { IgcBulletGraphCoreModule } from 'igniteui-webcomponents-gauges';
import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';
// register the modules
ModuleManager.register(
IgcBulletGraphCoreModule,
IgcBulletGraphModule
);
Usage
다음 코드는 글머리 기호 그래프 구성 요소를 만들고, 성과 막대, 비교 측정값 표식, 척도의 세 가지 비교 범위를 구성하는 과정을 안내합니다.
<igc-bullet-graph height="100px"
width="300px"
minimum-value="5"
maximum-value="55"
value="35"
target-value="43">
<igc-linear-graph-range
start-value="0"
end-value="15"
brush="#828181">
</igc-linear-graph-range>
<igc-linear-graph-range
start-value="15"
end-value="30"
brush="#AAAAAA">
</igc-linear-graph-range>
<igc-linear-graph-range
start-value="30"
end-value="55"
brush="#D0D0D0">
</igc-linear-graph-range>
</igc-bullet-graph>
Comparative Measures
글머리 기호 그래프는 성과 값과 목표 값이라는 두 가지 측정값을 표시할 수 있습니다.
성능 값은 구성 요소에 의해 표시되는 기본 측정값이며 전체 그래프의 길이를 따라 늘어나는 막대로 시각화됩니다. 목표값은 성과값을 비교하는 척도이다. 성능 표시줄 방향에 수직으로 실행되는 작은 블록으로 표시됩니다.
<igc-bullet-graph
height="80px"
width="400px"
value="50"
value-brush="DodgerBlue"
value-stroke-thickness="1"
value-inner-extent="0.5"
value-outer-extent="0.65"
target-value="80"
target-value-breadth="10"
target-value-brush="LimeGreen"
target-value-outline="LimeGreen"
target-value-stroke-thickness="1"
target-value-inner-extent="0.3"
target-value-outer-extent="0.85"
minimum-value="0"
maximum-value="100">
</igc-bullet-graph>
Highlight Value
불릿 그래프의 성능 값은 추가로 수정하여 진행 상황을 강조된 값으로 표시할 수 있습니다. 이렇게 하면value 불투명도가 낮아집니다. 좋은 예로, 가 50이고value 25로 설정되어highlightValue 있다면, 이 경우 의targetValue 가치가 무엇으로 설정되었든 성능이 50%라는 의미가 됩니다. 이 기능을 활성화하려면 먼저 오버레이로 설정highlightValueDisplayMode 한 후 보다 낮은highlightValue 곳에 avalue를 적용하세요.
<igc-bullet-graph
id="gauge"
height="80px"
width="100%"
minimum-value="0"
maximum-value="100"
value="70"
interval="10"
target-value="90"
label-interval="10"
label-extent="0.025"
labels-pre-terminal="0"
labels-post-initial="0"
highlight-value-display-mode="Overlay"
highlight-value="25" >
</igc-bullet-graph>
Comparative Ranges
범위는 눈금에서 지정된 값 범위를 강조 표시하는 시각적 요소입니다. 그 목적은 성능 막대 측정값의 질적 상태를 시각적으로 전달하는 동시에 해당 상태 내에 있는 정도를 보여주는 것입니다.
<igc-bullet-graph
height="80px" width="400px"
minimum-value="0" value="80" interval="10"
maximum-value="100" target-value="90"
range-brushes ="#C62828, #F96232, #FF9800"
range-outlines="#C62828, #F96232, #FF9800">
<igc-linear-graph-range
start-value="0" end-value="40"
inner-start-extent="0.075" inner-end-extent="0.075"
outer-start-extent="0.95" outer-end-extent="0.95">
</igc-linear-graph-range>
<igc-linear-graph-range
start-value="40" end-value="70"
inner-start-extent="0.075" inner-end-extent="0.075"
outer-start-extent="0.95" outer-end-extent="0.95">
</igc-linear-graph-range>
<igc-linear-graph-range
start-value="70" end-value="100"
inner-start-extent="0.075" inner-end-extent="0.075"
outer-start-extent="0.95" outer-end-extent="0.95">
</igc-linear-graph-range>
</igc-bullet-graph>
Tick Marks
눈금 표시는 글머리 기호 그래프의 가독성을 높이기 위해 척도를 간격으로 시각적으로 나누는 역할을 합니다.
- 주요 눈금 표시 – 주요 눈금 표시는 눈금의 기본 구분 기호로 사용됩니다. 나타나는 빈도, 범위 및 스타일은 해당 속성을 설정하여 제어할 수 있습니다.
- 보조 눈금 표시 – 보조 눈금 표시는 눈금의 가독성을 추가로 향상시키는 데 사용될 수 있고 주요 눈금과 유사한 방식으로 사용자 정의할 수 있는 보조 눈금 표시를 나타냅니다.
<igc-bullet-graph
height="80px" width="400px"
minimum-value="0" value="70"
maximum-value="100" target-value="90"
interval="10"
tick-brush="DodgerBlue"
ticks-pre-terminal="0"
ticks-post-initial="0"
tick-stroke-thickness="2"
tick-start-extent="0.2"
tick-end-extent="0.075"
minor-tick-count="4"
minor-tick-brush="DarkViolet"
minor-tick-end-extent="0.1"
minor-tick-start-extent="0.2"
minor-tick-stroke-thickness="1">
</igc-bullet-graph>
Labels
레이블은 척도의 측정값을 나타냅니다.
<igc-bullet-graph
height="80px" width="400px"
minimum-value="0" value="70" interval="10"
maximum-value="100" target-value="90"
label-interval="10"
label-extent="0.025"
labels-pre-terminal="0"
labels-post-initial="0"
font-brush="DodgerBlue"
font="11px Verdana">
</igc-bullet-graph>
Backing
뒷면 요소는 글머리 기호 그래프 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 레이블 및 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.
<igc-bullet-graph
height="80px" width="400px"
minimum-value="0" value="70" interval="10"
maximum-value="100" target-value="90"
backing-brush="#bddcfc"
backing-outline="DodgerBlue"
backing-stroke-thickness="4"
backing-inner-extent="0"
backing-outer-extent="1">
</igc-bullet-graph>
Scale
이 눈금은 게이지 내 모든 값을 강조하는 시각적 요소입니다. 스케일의 외관과 모양을 커스터마이즈할 수 있습니다. 스케일은 (속성을 사용해isScaleInverted) 반전시킬 수도 있으며, 모든 라벨은 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 렌더링됩니다.
<igc-bullet-graph
height="80px" width="400px"
minimum-value="0" value="70" interval="10"
maximum-value="100" target-value="90"
is-scale-inverted="false"
scale-background-brush="DodgerBlue"
scale-background-outline="DarkViolet"
scale-background-thickness="2"
scale-start-extent="0.05"
scale-end-extent="0.95">
</igc-bullet-graph>
Summary
귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 글머리 기호 그래프를 볼 수 있습니다.
<igc-bullet-graph
height="80px" width="400px"
minimum-value="0"
maximum-value="100"
is-scale-inverted="false"
scale-background-brush="Gray"
scale-background-outline="Gray"
scale-background-thickness="2"
scale-start-extent="0.05"
scale-end-extent="0.95"
value="50"
value-brush="Black"
value-stroke-thickness="1"
value-inner-extent="0.5"
value-outer-extent="0.65"
target-value="80"
target-value-breadth="7.5"
target-value-brush="Black"
target-value-outline="Black"
target-value-stroke-thickness="1"
target-value-inner-extent="0.3"
target-value-outer-extent="0.85"
label-interval="10"
label-extent="0.025"
labels-pre-terminal="0"
labels-post-initial="0"
font-brush="Black"
font="11px Verdana"
backing-brush="#cecece"
backing-outline="#cecece"
backing-stroke-thickness="4"
backing-inner-extent="0"
backing-outer-extent="1"
interval="10"
tick-brush="Black"
ticks-pre-terminal="0"
ticks-post-initial="0"
tick-stroke-thickness="2"
tick-start-extent="0.2"
tick-end-extent="0.075"
minor-tick-count="4"
minor-tick-brush="Black"
minor-tick-end-extent="0.1"
minor-tick-start-extent="0.2"
minor-tick-stroke-thickness="1"
range-brushes="#C62828, #F96232, #FF9800"
range-outlines="#C62828, #F96232, #FF9800">
<igc-linear-graph-range
start-value="20" end-value="40"
inner-start-extent="0.25" inner-end-extent="0.25"
outer-start-extent="0.9" outer-end-extent="0.9">
</igc-linear-graph-range>
<igc-linear-graph-range
start-value="40" end-value="60"
inner-start-extent="0.25" inner-end-extent="0.25"
outer-start-extent="0.9" outer-end-extent="0.9">
</igc-linear-graph-range>
<igc-linear-graph-range
start-value="60" end-value="90"
inner-start-extent="0.25" inner-end-extent="0.25"
outer-start-extent="0.9" outer-end-extent="0.9">
</igc-linear-graph-range>
</igc-bullet-graph>
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
Additional Resources
다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.