Web Components Bullet Graph 개요

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

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

Web Components Bullet Graph Example

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { IgcBulletGraphComponent } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcLinearGraphRangeComponent } from 'igniteui-webcomponents-gauges';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphAnimation {

    private gauge: IgcBulletGraphComponent;

    constructor() {

        this.gauge = document.getElementById('gauge') as IgcBulletGraphComponent;

        let button = document.getElementById('animationButton1');
        button!.addEventListener('click', this.onAnimateToGauge1)

        let button2 = document.getElementById('animationButton2');
        button2!.addEventListener('click', this.onAnimateToGauge2)

        let button3 = document.getElementById('animationButton3');
        button3!.addEventListener('click', this.onAnimateToGauge3)

        this.onAnimateToGauge1 = this.onAnimateToGauge1.bind(this);
        this.onAnimateToGauge2 = this.onAnimateToGauge2.bind(this);
        this.onAnimateToGauge3 = this.onAnimateToGauge3.bind(this);
    }

    public onAnimateToGauge3 = (e: any) => {

        this.gauge.transitionDuration = 1000;
        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 120;
        this.gauge.value = 70;
        this.gauge.interval = 10;

        // setting appearance of labels
        this.gauge.labelInterval = 10;
        this.gauge.labelExtent = 0.02;

        // setting custom appearance of performance bar
        this.gauge.valueInnerExtent = 0.5;
        this.gauge.valueOuterExtent = 0.7;
        this.gauge.valueBrush = '#000000';

        // setting custom appearance of target bar
        this.gauge.targetValueBrush = '#000000';
        this.gauge.targetValueBreadth = 10;
        this.gauge.targetValue = 90;

        // setting appearance of major/minor ticks
        this.gauge.minorTickCount = 5;
        this.gauge.minorTickEndExtent = 0.10;
        this.gauge.minorTickStartExtent = 0.20;
        this.gauge.tickStartExtent = 0.20;
        this.gauge.tickEndExtent = 0.05;
        this.gauge.tickStrokeThickness = 2;

        // setting custom gauge ranges
        const range1 = new IgcLinearGraphRangeComponent();
        range1.startValue = 0;
        range1.endValue = 40;
        const range2 = new IgcLinearGraphRangeComponent();
        range2.startValue = 40;
        range2.endValue = 80;
        const range3 = new IgcLinearGraphRangeComponent();
        range3.startValue = 80;
        range3.endValue = 120;

        this.gauge.rangeBrushes  = [ '#FF9800', '#F96232', '#C62828'];
        this.gauge.rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);
        this.gauge.ranges.add(range3);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.2;
            range.innerEndExtent = 0.2;
            range.outerStartExtent = 0.95;
            range.outerEndExtent = 0.95;
        }

        // setting extent of gauge scale
        this.gauge.scaleBackgroundThickness = 0.5;
        this.gauge.scaleBackgroundBrush = '#dbdbdb';
        this.gauge.scaleBackgroundOutline = 'gray';
        this.gauge.scaleStartExtent = 0.05;
        this.gauge.scaleEndExtent = 0.95;
        this.gauge.scaleBackgroundThickness = 0;

        // setting appearance of backing fill and outline
        this.gauge.backingBrush = '#f7f7f7';
        this.gauge.backingOutline = '#d1d1d1';
        this.gauge.backingStrokeThickness = 0;
    }

    public onAnimateToGauge2 = (e: any) => {

        this.gauge.transitionDuration = 1000;
        this.gauge.minimumValue = 100;
        this.gauge.maximumValue = 200;
        this.gauge.value = 120;
        this.gauge.interval = 10;

        // setting appearance of labels
        this.gauge.labelInterval = 10;
        this.gauge.labelExtent = 0.02;

        // setting custom appearance of performance bar
        this.gauge.valueInnerExtent = 0.5;
        this.gauge.valueOuterExtent = 0.7;
        this.gauge.valueBrush = '#000000';

        // setting custom appearance of target bar
        this.gauge.targetValueBrush = '#000000';
        this.gauge.targetValueBreadth = 10;
        this.gauge.targetValue = 180;

        // setting appearance of major/minor ticks
        this.gauge.minorTickCount = 5;
        this.gauge.minorTickEndExtent = 0.10;
        this.gauge.minorTickStartExtent = 0.20;
        this.gauge.tickStartExtent = 0.20;
        this.gauge.tickEndExtent = 0.05;
        this.gauge.tickStrokeThickness = 2;

        // setting custom gauge ranges
        const range1 = new IgcLinearGraphRangeComponent();
        range1.startValue = 100;
        range1.endValue = 125;
        const range2 = new IgcLinearGraphRangeComponent();
        range2.startValue = 125;
        range2.endValue = 150;
        const range3 = new IgcLinearGraphRangeComponent();
        range3.startValue = 150;
        range3.endValue = 175;
        const range4 = new IgcLinearGraphRangeComponent();
        range4.startValue = 175;
        range4.endValue = 200;

        this.gauge.rangeBrushes  = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
        this.gauge.rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);
        this.gauge.ranges.add(range3);
        this.gauge.ranges.add(range4);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.2;
            range.innerEndExtent = 0.2;
            range.outerStartExtent = 0.95;
            range.outerEndExtent = 0.95;
        }

        // setting extent of gauge scale
        this.gauge.scaleBackgroundThickness = 0.5;
        this.gauge.scaleBackgroundBrush = '#dbdbdb';
        this.gauge.scaleBackgroundOutline = 'gray';
        this.gauge.scaleStartExtent = 0.05;
        this.gauge.scaleEndExtent = 0.95;
        this.gauge.scaleBackgroundThickness = 0;

        // setting appearance of backing fill and outline
        this.gauge.backingBrush = '#f7f7f7';
        this.gauge.backingOutline = '#d1d1d1';
        this.gauge.backingStrokeThickness = 0;
    }

    public onAnimateToGauge1 = (e: any) => {

        this.gauge.transitionDuration = 1000;
        this.gauge.minimumValue = 0;
        this.gauge.maximumValue = 80;
        this.gauge.value = 70;
        this.gauge.interval = 20;

        // setting appearance of labels
        this.gauge.labelInterval = 20;
        this.gauge.labelExtent = 0.02;

        // setting custom appearance of performance bar
        this.gauge.valueInnerExtent = 0.5;
        this.gauge.valueOuterExtent = 0.7;
        this.gauge.valueBrush = '#000000';

        // setting custom appearance of target bar
        this.gauge.targetValueBrush = '#000000';
        this.gauge.targetValueBreadth = 10;
        this.gauge.targetValue = 60;

        // setting appearance of major/minor ticks
        this.gauge.minorTickCount = 5;
        this.gauge.minorTickEndExtent = 0.10;
        this.gauge.minorTickStartExtent = 0.20;
        this.gauge.tickStartExtent = 0.20;
        this.gauge.tickEndExtent = 0.05;
        this.gauge.tickStrokeThickness = 2;

        // setting custom gauge ranges
        const range1 = new IgcLinearGraphRangeComponent();
        range1.startValue = 0;
        range1.endValue = 40;
        const range2 = new IgcLinearGraphRangeComponent();
        range2.startValue = 40;
        range2.endValue = 80;

        this.gauge.rangeBrushes  = [ '#a4bd29', '#F86232' ];
        this.gauge.rangeOutlines = [ '#a4bd29', '#F86232' ];
        this.gauge.ranges.clear();
        this.gauge.ranges.add(range1);
        this.gauge.ranges.add(range2);

        // setting extent of all gauge ranges
        for (let i = 0; i < this.gauge.ranges.count; i++) {
            const range = this.gauge.ranges.item(i);
            range.innerStartExtent = 0.2;
            range.innerEndExtent = 0.2;
            range.outerStartExtent = 0.95;
            range.outerEndExtent = 0.95;
        }

        // setting extent of gauge scale
        this.gauge.scaleBackgroundThickness = 0.5;
        this.gauge.scaleBackgroundBrush = '#dbdbdb';
        this.gauge.scaleBackgroundOutline = 'gray';
        this.gauge.scaleStartExtent = 0.05;
        this.gauge.scaleEndExtent = 0.95;
        this.gauge.scaleBackgroundThickness = 0;

        // setting appearance of backing fill and outline
        this.gauge.backingBrush = '#f7f7f7';
        this.gauge.backingOutline = '#d1d1d1';
        this.gauge.backingStrokeThickness = 0;
    }

}

new BulletGraphAnimation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphAnimation</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
        <div class="options horizontal">
            <button id="animationButton1" class="options-button">Gauge Animation #1</button>
            <button id="animationButton2" class="options-button">Gauge Animation #2</button>
            <button id="animationButton3" class="options-button">Gauge Animation #3</button>
        </div>
        <igc-bullet-graph
            id="gauge"            
            height="80px"
            width="100%"
            minimum-value="0"
            maximum-value="120"
            value-brush="#4286f4"
            value="70"
            target-value-brush="#4286f4"
            target-value="90"
            target-value-breadth="10"
            interval="10"
            label-interval="10"
            label-extent="0.02"
            range-brushes ="#FF9800, #F96232, #C62828"
            range-outlines="#FF9800, #F96232, #C62828"
            scale-background-thickness="0"
            scale-background-brush="#dbdbdb"
            scale-background-outline="gray">
        </igc-bullet-graph>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

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

Dependencies

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

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges
cmd

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
);
ts

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

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphMeasures {

     constructor() {
    }

}

new BulletGraphMeasures();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphMeasures</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
                <igc-bullet-graph
                     id="gauge"
                     height="80px"
                     width="100%"
                     minimum-value="0"
                     maximum-value="100"
                     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"
                     scale-background-brush = "#e5e5e5"
                     scale-background-outline = "#e5e5e5"
                     backing-brush = "#f7f7f7"
                     backing-outline = "#bfbfbf"
                     tick-stroke-thickness = "1.5" >
                </igc-bullet-graph>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Highlight Value

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

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphHighlightNeedle {

    constructor() {
    }

}

new BulletGraphHighlightNeedle();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphHighlightNeedle</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
    <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>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphRanges {

    constructor() {
    }

}

new BulletGraphRanges();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphRanges</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
    <igc-bullet-graph
        id="gauge"
        height="80px"
        width="100%"
        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 name="range1"
            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 name="range2"
            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 name="range3"
            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>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphTickmarks {

    constructor() {
    }

}

new BulletGraphTickmarks();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphTickmarks</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
    <igc-bullet-graph
        height="80px"
        width="100%"
        minimum-value="0" value="70" interval="10"
        maximum-value="100" target-value="90"
        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>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphLabels {

    constructor() {
    }

}

new BulletGraphLabels();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphLabels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
    <igc-bullet-graph
        id="gauge"
        height="80px"
        width="100%"
        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>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphBackground {

    constructor() {
    }

}

new BulletGraphBackground();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphBackground</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
    <igc-bullet-graph
        id="gauge"
        height="80px"
        width="100%"
        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>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

EXAMPLE

TS

HTML

CSS

import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcBulletGraphModule);

export class BulletGraphScale {

    constructor() {
    }

}

new BulletGraphScale();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>BulletGraphScale</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample center" >
    <igc-bullet-graph
        id="gauge"
        height="80px"
        width="100%"
        minimum-value="0" value="70" interval="10"
        maximum-value="100" target-value="90"
        is-scale-inverted="false"
        scale-background-brush="DodgerBlue"
        scale-background-outline="Red"
        scale-background-thickness="2"
        scale-start-extent="0.05"
        scale-end-extent="0.95" >
    </igc-bullet-graph>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

API References

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

• IgcBulletGraphComponent
• IgcLinearGraphRangeComponent

Additional Resources

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

• 선형 계기
• 방사형 게이지