React Bullet Graph 개요

React bullet graph 컴포넌트를 사용하면 척도와 비교한 측정값을 선형적이고 간결하게 볼 수 있습니다.

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

React Bullet Graph Example

The following sample demonstrates how setting multiple properties on the same IgrBulletGraph can transform it to completely different bullet graph.

The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more.

Dependencies

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

npm install --save igniteui-react-core
npm install --save igniteui-react-gauges

Component Modules

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

import { IgrBulletGraphModule } from 'igniteui-react-gauges';

IgrBulletGraphModule.register();

Usage

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

 <IgrBulletGraph height="100"
                   width="300"
                   minimumValue={5}
                   maximumValue={55}
                   value={35}
                   targetValue={43}>
        <IgrLinearGraphRange startValue={0}
                                endValue={15}
                                brush="#828181"/>
        <IgrLinearGraphRange StartValue={15}
                                endValue={30}
                                brush="#AAAAAA"/>
        <IgrLinearGraphRange StartValue={30}
                                bndValue={55}
                                brush="#D0D0D0"/>
 </IgrBulletGraph>

Comparative Measures

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

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

<IgrBulletGraph
    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}
    height="80px" width="400px"
    minimumValue={0} value={50}
    maximumValue={100} />

Highlight Value

The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the value appear with a lower opacity. A good example is if value is 50 and highlightValue is set to 25. This would represent a performance of 50% regardless of what the value of targetValue is set to. To enable this first set highlightValueDisplayMode to Overlay and then apply a highlightValue to something lower than value.

<IgrBulletGraph
    height="80px"
    width="100%"
    value={70} 
    targetValue={90}
    interval={10}
    minimumValue={0} 
    maximumValue={100} 
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    highlightValueDisplayMode="Overlay"
    highlightValue={25} />

Comparative Ranges

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

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0} value={80} interval={10}
    maximumValue={100} targetValue={90}
    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <IgrLinearGraphRange
        startValue={0} endValue={40}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.95} outerEndExtent={0.95} />
    <IgrLinearGraphRange
        startValue={40} endValue={70}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.95} outerEndExtent={0.95} />
    <IgrLinearGraphRange
        startValue={70} endValue={100}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.95} outerEndExtent={0.95} />
</IgrBulletGraph>

Tick Marks

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

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

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0} value={70}
    maximumValue={100} targetValue={90}
    interval={10}
    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} />

Labels

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

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0} value={70} interval={10}
    maximumValue={100} targetValue={90}
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    fontBrush="DodgerBlue"
    font="11px Verdana"/>

Backing

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

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0} value={70} interval={10}
    maximumValue={100} targetValue={90}
    backingBrush="#bddcfc"
    backingOutline="DodgerBlue"
    backingStrokeThickness={4}
    backingInnerExtent={0}
    backingOuterExtent={1} />

Scale

The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using isScaleInverted property) and all labels will be rendered from right-to-left instead of left-to-right.

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0} value={70} interval={10}
    maximumValue={100} targetValue={90}
    isScaleInverted={false}
    scaleBackgroundBrush="DodgerBlue"
    scaleBackgroundOutline="DarkViolet"
    scaleBackgroundThickness={2}
    scaleStartExtent={0.05}
    scaleEndExtent={0.95} />

Summary

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

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0}
    maximumValue={100}
    isScaleInverted={false}
    scaleBackgroundBrush="Gray"
    scaleBackgroundOutline="Gray"
    scaleBackgroundThickness={2}
    scaleStartExtent={0.05}
    scaleEndExtent={0.95}

    value={50}
    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="Black"
    font="11px Verdana"

    backingBrush="#cecece"
    backingOutline="#cecece"
    backingStrokeThickness={4}
    backingInnerExtent={0}
    backingOuterExtent={1}

    interval={10}
    tickBrush="Black"
    ticksPreTerminal={0}
    ticksPostInitial={0}
    tickStrokeThickness={2}
    tickStartExtent={0.2}
    tickEndExtent={0.075}

    minorTickCount={4}
    minorTickBrush="Black"
    minorTickEndExtent={0.1}
    minorTickStartExtent={0.2}
    minorTickStrokeThickness={1}

    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <IgrLinearGraphRange
        startValue={20} endValue={40}
        innerStartExtent={0.25} innerEndExtent={0.25}
        outerStartExtent={0.9} outerEndExtent={0.9} />
    <IgrLinearGraphRange
        startValue={40} endValue={60}
        innerStartExtent={0.25} innerEndExtent={0.25}
        outerStartExtent={0.9} outerEndExtent={0.9} />
    <IgrLinearGraphRange
        startValue={60} endValue={90}
        innerStartExtent={0.25} innerEndExtent={0.25}
        outerStartExtent={0.9} outerEndExtent={0.9} />
</IgrBulletGraph>

API References

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

Additional Resources

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