Premium

Blazor ブレットグラフの概要

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

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

Blazor ブレットグラフの例

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

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

モジュールの要件

Ignite UI for Blazor のサービスを登録します。

// in Program.cs file

builder.Services.AddIgniteUIBlazor();

IgbBulletGraph のクライアントリソースモジュールである IgbBulletGraphModule の登録は任意です。コンポーネントは初めてレンダリングされるときにリソースを読み込みます。ただし、builder.Services.AddIgniteUIBlazor(typeof(IgbBulletGraphModule)) のように指定すると、リソースを事前に読み込んだり、クライアント側でのみ作成される要素に対応したりできます (コンポーネントモジュールを参照)。

使用方法

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

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

比較メジャー

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

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

<IgbBulletGraph
    Height="80px"
    Width="400px"
    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.Value が低い不透明度で表示されます。良い例としては、IgbBulletGraph.Value が 50 で、HighlightValue が 25 に設定されている場合です。これは、TargetValue の値が何に設定されているかに関係なく、50% のパフォーマンスを表します。これを有効にするには、まず HighlightValueDisplayMode を Overlay に設定し、次に HighlightValue を IgbBulletGraph.Value よりも低い値に適用します。

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

比較範囲

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

<IgbBulletGraph
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="80"
    Interval="10"
    TargetValue="90"
    RangeBrushes="rgba(198, 40, 40, 1) rgba(249, 98, 50, 1) rgba(255, 152, 0, 1)"
    RangeOutlines="rgba(198, 40, 40, 1) rgba(249, 98, 50, 1) rgba(255, 152, 0, 1)">
    <IgbLinearGraphRange
        StartValue="0"
        EndValue="40"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.95"
        OuterEndExtent="0.95" />
    <IgbLinearGraphRange
        StartValue="40"
        EndValue="70"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.95"
        OuterEndExtent="0.95" />
    <IgbLinearGraphRange
        StartValue="70"
        EndValue="100"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.95"
        OuterEndExtent="0.95" />
</IgbBulletGraph>

目盛

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

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

<IgbBulletGraph
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="70"
    TargetValue="90"
    Interval="10"
    TickBrush="DodgerBlue"
    TicksPreTerminal="0"
    TicksPostInitial="0"
    TickStrokeThickness="2"
    TickStartExtent="0.2"
    TickEndExtent="0.075"
    MinorTickCount="4"
    MinorTickBrush="DarkViolet"
    MinorTickStartExtent="0.2"
    MinorTickEndExtent="0.1"
    MinorTickStrokeThickness="1" />

ラベル

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

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

バッキング

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

<IgbBulletGraph
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="70"
    TargetValue="90"
    Interval="10"
    BackingBrush="rgba(189, 220, 252, 1)"
    BackingOutline="DodgerBlue"
    BackingStrokeThickness="4"
    BackingInnerExtent="0"
    BackingOuterExtent="1" />

スケール

スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (IsScaleInverted プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。

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

まとめ

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

<IgbBulletGraph
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Interval="10"
    IsScaleInverted="false"
    ScaleBackgroundBrush="DodgerBlue"
    ScaleBackgroundOutline="DarkViolet"
    ScaleBackgroundThickness="2"
    ScaleStartExtent="0.05"
    ScaleEndExtent="0.95"
    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"
    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
    HighlightValue="25"
    LabelInterval="10"
    LabelExtent="0.025"
    LabelsPreTerminal="0"
    LabelsPostInitial="0"
    FontBrush="DodgerBlue"
    Font="11px Verdana"
    BackingBrush="rgba(189, 220, 252, 1)"
    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"
    MinorTickStartExtent="0.2"
    MinorTickEndExtent="0.1"
    MinorTickStrokeThickness="1"
    RangeBrushes="rgba(198, 40, 40, 1) rgba(249, 98, 50, 1) rgba(255, 152, 0, 1)"
    RangeOutlines="rgba(198, 40, 40, 1) rgba(249, 98, 50, 1) rgba(255, 152, 0, 1)">
    <IgbLinearGraphRange
        StartValue="0"
        EndValue="40"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.95"
        OuterEndExtent="0.95" />
    <IgbLinearGraphRange
        StartValue="40"
        EndValue="70"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.95"
        OuterEndExtent="0.95" />
    <IgbLinearGraphRange
        StartValue="70"
        EndValue="100"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.95"
        OuterEndExtent="0.95" />
</IgbBulletGraph>

API リファレンス

IgbBulletGraph
IgbLinearGraphRange

その他のリソース

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

Blazor ブレット グラフの概要

Blazor ブレット グラフの例