Premium

Blazor リニアゲージの概要

Ignite UI for Blazor リニアゲージコンポーネントを使用すると、リニアゲージの形式でデータを視覚化できます。IgbLinearGauge は、スケールおよび 1 つ以上の範囲と比較した値のシンプルで簡潔なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれており、アニメーションでは、TransitionDuration プロパティの設定で簡単にカスタマイズできます。また構成可能な向きや方向、視覚要素やツールチップなどがサポートされます。

Blazor リニアゲージの例

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

モジュールの要件

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor();

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

使用方法

以下のコードは針およびスケールで 3 つの比較範囲を含むリニアゲージを作成する方法を紹介します。

<IgbLinearGauge
    Height="30px"
    Width="700px"
    MinimumValue="5"
    MaximumValue="55"
    Value="43">
    <IgbLinearGraphRange
        StartValue="0"
        EndValue="15"
        Brush="Red" />
    <IgbLinearGraphRange
        StartValue="15"
        EndValue="30"
        Brush="Yellow" />
    <IgbLinearGraphRange
        StartValue="30"
        EndValue="55"
        Brush="Green" />
</IgbLinearGauge>

針

これは、コンポーネントで表示されるプライマリメジャーでバーで可視化されます。あるいは以下で示す図形のほとんどすべてをカスタマイズすることもできます。

<IgbLinearGauge
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    IsNeedleDraggingEnabled="true"
    NeedleShape="LinearGraphNeedleShape.Custom"
    NeedleBrush="DodgerBlue"
    NeedleOutline="DodgerBlue"
    NeedleStrokeThickness="1"
    NeedleBreadth="15"
    NeedleInnerExtent="0.35"
    NeedleOuterExtent="0.65"
    NeedleOuterPointExtent="0.8"
    NeedleInnerPointExtent="0.325"
    NeedleInnerPointWidth="0"
    NeedleOuterPointWidth="0.3"
    NeedleInnerBaseWidth="0"
    NeedleOuterBaseWidth="0.07" />

針のハイライト

リニアゲージを変更して、2 番目の針を表示できます。これにより、メイン針の IgbLinearGauge.Value の不透明度が低く表示されます。これを有効にするには、まず HighlightValueDisplayMode を Overlay に設定し、次に HighlightValue を適用します。

<IgbLinearGauge
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    LabelInterval="10"
    LabelExtent="0.025"
    LabelsPreTerminal="0"
    LabelsPostInitial="0"
    NeedleBrush="Blue"
    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
    HighlightValue="25"
    IsHighlightNeedleDraggingEnabled="true" />

範囲

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

<IgbLinearGauge
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    RangeBrushes="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)"
    RangeOutlines="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)">
    <IgbLinearGraphRange
        StartValue="0"
        EndValue="50"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.25"
        OuterEndExtent="0.4" />
    <IgbLinearGraphRange
        StartValue="50"
        EndValue="100"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.4"
        OuterEndExtent="0.55" />
</IgbLinearGauge>

目盛

目盛は、リニアゲージを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。

主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。

補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。

<IgbLinearGauge
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    TickBrush="DodgerBlue"
    TicksPreTerminal="0"
    TicksPostInitial="0"
    TickStrokeThickness="2"
    TickStartExtent="0.25"
    TickEndExtent="0.05"
    MinorTickCount="4"
    MinorTickBrush="DarkViolet"
    MinorTickStartExtent="0.15"
    MinorTickEndExtent="0.05"
    MinorTickStrokeThickness="1" />

ラベル

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

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

バッキング

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

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

スケール

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

<IgbLinearGauge
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    IsScaleInverted="false"
    ScaleBrush="DodgerBlue"
    ScaleOutline="DarkViolet"
    ScaleStrokeThickness="1"
    ScaleInnerExtent="0.05"
    ScaleOuterExtent="0.65"
    ScaleStartExtent="0.05"
    ScaleEndExtent="0.95" />

まとめ

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

<IgbLinearGauge
    Height="80px"
    Width="400px"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    IsScaleInverted="false"
    ScaleBrush="DodgerBlue"
    ScaleOutline="DarkViolet"
    ScaleStrokeThickness="1"
    ScaleInnerExtent="0.05"
    ScaleOuterExtent="0.65"
    ScaleStartExtent="0.05"
    ScaleEndExtent="0.95"
    BackingBrush="rgba(189, 220, 252, 1)"
    BackingOutline="DodgerBlue"
    BackingStrokeThickness="4"
    BackingInnerExtent="0"
    BackingOuterExtent="1"
    LabelInterval="10"
    LabelExtent="0.025"
    LabelsPreTerminal="0"
    LabelsPostInitial="0"
    FontBrush="DodgerBlue"
    Font="11px Verdana"
    TickBrush="DodgerBlue"
    TicksPreTerminal="0"
    TicksPostInitial="0"
    TickStrokeThickness="2"
    TickStartExtent="0.25"
    TickEndExtent="0.05"
    MinorTickCount="4"
    MinorTickBrush="DarkViolet"
    MinorTickStartExtent="0.15"
    MinorTickEndExtent="0.05"
    MinorTickStrokeThickness="1"
    IsNeedleDraggingEnabled="true"
    NeedleShape="LinearGraphNeedleShape.Custom"
    NeedleBrush="DodgerBlue"
    NeedleOutline="DodgerBlue"
    NeedleStrokeThickness="1"
    NeedleBreadth="15"
    NeedleInnerExtent="0.35"
    NeedleOuterExtent="0.65"
    NeedleOuterPointExtent="0.8"
    NeedleInnerPointExtent="0.325"
    NeedleInnerPointWidth="0"
    NeedleOuterPointWidth="0.3"
    NeedleInnerBaseWidth="0"
    NeedleOuterBaseWidth="0.07"
    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
    HighlightValue="25"
    IsHighlightNeedleDraggingEnabled="true"
    RangeBrushes="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)"
    RangeOutlines="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)">
    <IgbLinearGraphRange
        StartValue="0"
        EndValue="50"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.25"
        OuterEndExtent="0.4" />
    <IgbLinearGraphRange
        StartValue="50"
        EndValue="100"
        InnerStartExtent="0.075"
        InnerEndExtent="0.075"
        OuterStartExtent="0.4"
        OuterEndExtent="0.55" />
</IgbLinearGauge>

API リファレンス

IgbLinearGauge
IgbLinearGraphRange

その他のリソース

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

Blazor リニア ゲージの概要

Blazor リニア ゲージの例