Blazor 글머리 기호 그래프 개요

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

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

Blazor Bullet Graph Example

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

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

Component Modules

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbBulletGraphModule));

Usage

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

<IgbBulletGraph Height="80px" Width="100%"
MinimumValue="5" Value="35"
MaximumValue="55" TargetValue="43">
<IgbLinearGraphRange StartValue="0"
  EndValue="15"
  Brush="#828181" />
<IgbLinearGraphRange StartValue="15"
  EndValue="30"
  Brush="#AAAAAA" />
<IgbLinearGraphRange StartValue="30"
  EndValue="55"
  Brush="#D0D0D0" />
</IgbBulletGraph>

Comparative Measures

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

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

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0"
    MaximumValue="100"

    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">
</IgbBulletGraph>

Highlight Value

불릿 그래프의 성능 값을 추가로 수정하여 강조 표시된 값으로 표시되는 진행률을 표시할 수 있습니다. 이렇게 하면 불 Value 투명도가 낮아 보입니다. 좋은 예는 if가 50이고 HighlightValue 25로 설정된 경우 Value 입니다. 이는 값이 TargetValue 설정된 내용에 관계없이 50%의 성능을 나타냅니다. 이를 활성화하려면 먼저 오버레이로 설정한 HighlightValueDisplayMode 다음 다음보다 Value 낮은 항목에 a HighlightValue를 적용합니다.

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0" 
    Value="70"
    TargetValue="90"
    Interval="10"
    MaximumValue="100" 
    LabelInterval="10"
    LabelExtent="0.025"
    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
    HighlightValue=25>
</IgbBulletGraph>

Comparative Ranges

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

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="80" Interval="10"
  MaximumValue="100" TargetValue="90"
  RangeBrushes="#C62828,#F96232,#FF9800"
  RangeOutlines="#C62828,#F96232,#FF9800">
<IgbLinearGraphRange
  StartValue="0"
  EndValue="40"
  InnerStartExtent="0.075"
  InnerEndExtent="0.075"
  OuterStartExtent="0.95"
  OuterEndExtent="0.95">
</IgbLinearGraphRange>
<IgbLinearGraphRange
  StartValue="40"
  EndValue="70"
  InnerStartExtent="0.075"
  InnerEndExtent="0.075"
  OuterStartExtent="0.95"
  OuterEndExtent="0.95">
</IgbLinearGraphRange>
<IgbLinearGraphRange StartValue="70"
  EndValue="100"
  InnerStartExtent="0.075"
  InnerEndExtent="0.075"
  OuterStartExtent="0.95"
  OuterEndExtent="0.95">
</IgbLinearGraphRange>
</IgbBulletGraph>

Tick Marks

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

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

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0" Value="70" Interval="10"
    MaximumValue="100" TargetValue="90"

    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">
</IgbBulletGraph>

Labels

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

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="70" Interval="10"
  MaximumValue="100" TargetValue="90"
  LabelInterval="10"
  LabelExtent="0.025"
  LabelsPreTerminal="0"
  LabelsPostInitial="0"
  FontBrush="DodgerBlue"
  Font="11px Verdana">
</IgbBulletGraph>

Backing

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

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="70" Interval="10"
  MaximumValue="100" TargetValue="90"
  BackingBrush="#BDDCFC"
  BackingOutline="DodgerBlue"
  BackingStrokeThickness="4"
  BackingInnerExtent="0"
  BackingOuterExtent="1">
</IgbBulletGraph>

Scale

눈금은 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 눈금의 모양과 모양을 사용자 정의할 수 있습니다. IsScaleInverted 속성을 사용하여 배율을 반전할 수도 있으며 모든 레이블은 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 렌더링됩니다.

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="70" Interval="10"
  MaximumValue="100" TargetValue="90"
  IsScaleInverted="false"
  ScaleBackgroundBrush="DodgerBlue"
  ScaleBackgroundOutline="Red"
  ScaleBackgroundThickness="2"
  ScaleStartExtent="0.05"
  ScaleEndExtent="0.95">
</IgbBulletGraph>

Summary

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

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0" Value="50" Interval="10"
    MaximumValue="100" TargetValue="90"
    IsScaleInverted="false"
    ScaleBackgroundBrush="DodgerBlue"
    ScaleBackgroundOutline="Red"
    ScaleBackgroundThickness="2"
    ScaleStartExtent="0.05"
    ScaleEndExtent="0.95"

    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="DodgerBlue"
    Font="11px Verdana"

    BackingBrush="#BDDCFC"
    BackingOutline="DodgerBlue"
    BackingStrokeThickness="4"
    BackingInnerExtent="0"
    BackingOuterExtent="1"
    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"

    RangeBrushes="#C62828,#F96232,#FF9800"
    RangeOutlines="#C62828,#F96232,#FF9800">
    <IgbLinearGraphRange StartValue="20" EndValue="40"
        InnerStartExtent="0.025" InnerEndExtent="0.025"
        OuterStartExtent="0.9" OuterEndExtent="0.9">
    </IgbLinearGraphRange>
    <IgbLinearGraphRange StartValue="40" EndValue="60"
        InnerStartExtent="0.025" InnerEndExtent="0.025"
        OuterStartExtent="0.9" OuterEndExtent="0.9">
    </IgbLinearGraphRange>
    <IgbLinearGraphRange StartValue="60" EndValue="90"
        InnerStartExtent="0.025" InnerEndExtent="0.025"
        OuterStartExtent="0.9 OuterEndExtent="0.9">
    </IgbLinearGraphRange>
</IgbBulletGraph>

API References

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

Additional Resources

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