Web Components ブレット グラフの概要

Web Components Bullet Graph コンポーネントは、目盛り上でメジャーの比較を簡潔にリニアで表示します。

ブレット グラフ コンポーネントは、きれいなデータ表現を作成するための多数の機能をサポートします。ブレット グラフは、目標に対する進捗状況、評価の範囲、複数の測定比較を表現する際に最も効率的で効果的なグラフの 1 つです。ブレット グラフは、水平または垂直のわずかな領域で、ゴールに至る進捗、評価の範囲、複数の測定比較を表現するための最も効率的で効果的な方法の 1 つです。

Web Components ブレット グラフの例

以下のサンプルは、同じ 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

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

このゲージは、スケール、針、目盛 (1 組)、ラベル (1 組) をサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、transitionDuration プロパティの設定で簡単にカスタマイズできます。 ブレット グラフの機能には構成可能な向きや方向、視覚要素やツールチップなどがあります。

依存関係

gauge パッケージのインストール時に core パッケージもインストールする必要があります。

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

モジュールの要件

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

使用方法

以下のコードは、ブレット グラフ コンポーネントを作成し、パフォ―マンス バーと比較目盛マーカー、および 3 つの比較範囲をスケールに構成します。

  <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

比較メジャー

ブレットグラフは、パフォーマンス値とターゲット値の 2 つのメジャーを表示できます。

パフォーマンス値は、コンポーネントで表示されるプライマリ メジャーでグラフ全体の長さに沿って拡張するバーとして表示されます。ターゲット値は、パフォーマンス値が比較の対象とするメジャーでパフォーマンス バーの向きに対して直角に交わる小さなブロックとして表示されます。

  <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

ハイライト値

バレット グラフのパフォーマンス値をさらに変更して、進捗状況をハイライト値として表示することもできます。これにより、value が低い不透明度で表示されます。良い例としては、value が 50 で、highlightValue が 25 に設定されている場合です。これは、targetValue の値が何に設定されているかに関係なく、50% のパフォーマンスを表します。これを有効にするには、まず highlightValueDisplayMode を Overlay に設定し、次に highlightValue を value よりも低い値に適用します。

<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

比較範囲

範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。

  <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

目盛

目盛は、ブレット グラフを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。

• 主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。
• 補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。

  <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

ラベル

ラベルはスケールのメジャーを示します。

  <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

バッキング

バッキング要素はブレット グラフ コントロールの背景と境界線を表します。常に最初に描画される要素でラベルやメモリなどの残りの要素は互いにオーバーレイします。

  <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

スケール

スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (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

まとめ

上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。

  <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 リファレンス

以下は上記のセクションで説明した API メンバーのリストです。

• IgcBulletGraphComponent
• IgcLinearGraphRangeComponent

その他のリソース

その他のゲージ タイプの詳細については、以下のトピックを参照してください。

• リニア ゲージ
• ラジアル ゲージ