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

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

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

    Web Components ブレット グラフの例

    以下のサンプルは、同じ IgcBulletGraphComponent でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。

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

    依存関係

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

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

    モジュールの要件

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

    使用方法

    以下のコードは、ブレット グラフ コンポーネントを作成し、パフォ―マンス バーと比較目盛マーカー、および 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>
    

    比較メジャー

    ブレットグラフは、パフォーマンス値とターゲット値の 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>
    

    ハイライト値

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

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

    比較範囲

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

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

    目盛

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

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

    ラベル

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

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

    バッキング

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

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

    スケール

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

    まとめ

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

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

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

    その他のリソース

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