syncfusion-blazor-linear-gauge

Syncfusion Blazor Linear Gauge の実装

NuGet： Syncfusion.Blazor.LinearGauge + Syncfusion.Blazor.Themes
名前空間： Syncfusion.Blazor.LinearGauge

このスキルを使用する場面

次のようなニーズがある場合に、このスキルを使用します。

• 線形スケールで数値を可視化する（水平または垂直）
• 温度、圧力、速度、進捗などの測定データを表示する
• ゲージの可視化を含むダッシュボードコンポーネントを作成する
• 範囲とインジケーターを使った KPI 表示を実装する
• アニメーション付きポインターでリアルタイムデータを表示する
• ユーザーがポインターをドラッグして値を変更できるインタラクティブなゲージを構築する
• 複数の軸とポインターを使ったマルチスケールの可視化を作成する

Syncfusion Blazor Linear Gauge は、カスタマイズ可能なスケール、ポインター、範囲を使って数値を正確に可視化する必要があるアプリケーションに最適です。

---

コンポーネントの概要

Blazor Linear Gauge（SfLinearGauge） は、次のような機能を備え、線形スケールで数値を表示するデータ可視化コンポーネントです。

• カスタマイズ可能な範囲とスタイルを備えた複数の軸
• さまざまなポインターの種類（マーカーの形状、バー型ポインター、テキスト、画像）
• 値を分類する色分けされた範囲
• ラベルやカスタムコンテンツ用の注釈
• ポインターの値をドラッグして変更できる機能などのインタラクティブ機能
• 動的な更新に対応するイベントとメソッド
• WCAG に準拠したアクセシビリティサポート
• グローバルなアプリケーション向けの国際化

---

ドキュメントとナビゲーションガイド

このスキルでは、Linear Gauge コンポーネントの各機能について、包括的で独立したリファレンスファイルを提供します。現在のニーズに応じて、適切なリファレンスを参照してください。

はじめに

📄 参照： references/getting-started.md

参照するタイミング： 初回のセットアップ、新しいプロジェクトの開始、インストールに関する質問

内容：

• Visual Studio、VS Code、.NET CLI を使ったインストール
• NuGet パッケージのインストール（Syncfusion.Blazor.LinearGauge、Syncfusion.Blazor.Themes）
• 名前空間のインポートとサービスの登録
• スタイルシートとスクリプトの参照
• 基本的な LinearGauge コンポーネントの実装
• ポインターの追加と値の設定
• タイトルと範囲の追加
• 初めてのゲージアプリケーションの実行

コアコンポーネント

軸の構成

📄 参照： references/axes-configuration.md

参照するタイミング： ゲージのスケールを設定する場合、軸の外観をカスタマイズする場合、複数の軸を扱う場合

内容：

• スケールの最小値と最大値の設定
• 線のカスタマイズ（高さ、幅、色、オフセット）
• 主目盛りの構成（間隔、高さ、色、幅、位置、オフセット）
• 補助目盛りの構成（間隔、高さ、色、幅、位置、オフセット）
• ラベルのカスタマイズ（書式、フォント、位置、オフセット）
• 1 つのゲージに複数の軸を設定
• 軸の方向の反転
• 軸の反対側への配置
• すべての構成に関する完全なコード例

ポインター

📄 参照： references/pointers.md

参照するタイミング： 値インジケーターを追加する場合、ポインターの外観をカスタマイズする場合、複数のポインターを実装する場合

内容：

• ポインターの値の設定
• さまざまな形状のマーカーポインター（Circle、Rectangle、Triangle、Diamond、InvertedTriangle）
• カスタマイズオプションを備えたバー型ポインター
• カスタム画像を使った画像ポインター
• カスタムスタイルを適用したテキストポインター
• ポインターの位置と配置
• 滑らかな遷移のためのアニメーション構成
• 1 つの軸に複数のポインターを設定
• 値を変更するためのドラッグ＆ドロップ操作
• 各ポインタータイプの詳細な例

範囲

📄 参照先： references/ranges.md

参照するタイミング： 色分けされた値の範囲の追加、パフォーマンスゾーンの実装、視覚的なしきい値の作成

内容：

• 範囲の開始値と終了値の設定
• 範囲の色のカスタマイズ
• 範囲の配置（内側、外側、交差）
• 範囲オフセットの設定
• グラデーション効果の開始幅と終了幅
• 1つの軸上に複数の範囲を設定
• 実用例（温度ゾーン、パフォーマンス指標、ステータス範囲）
• 視覚的な結果を含む完全なコード例

外観とスタイル

注釈

📄 参照先： references/annotations.md

参照するタイミング： ゲージにラベル、カスタムコンテンツ、単位、動的テキストを追加する場合

内容：

• テキスト注釈の追加
• 注釈内の HTML コンテンツ
• x、y 座標による注釈の配置
• 複数の注釈を重ねるための Z インデックス
• テキスト注釈のフォントスタイル
• 水平方向と垂直方向の配置
• ゲージ上に複数の注釈を追加
• 動的コンテンツの更新
• 実用例（単位ラベル、値の表示、警告）

外観とスタイル

📄 参照先： references/appearance-and-styling.md

参照するタイミング： ゲージの外観、テーマ、レスポンシブデザイン、印刷時のスタイルをカスタマイズする場合

内容：

• コンテナーのカスタマイズ（幅、高さ、背景、境界線）
• 向き（横向きと縦向き）
• マージンとコンテナーの調整
• タイトルのカスタマイズ（テキスト、フォント、位置）
• テーマの選択（Bootstrap、Material、Fabric、Fluent、Tailwind など）
• カスタム CSS スタイル
• レスポンシブデザインに関する考慮事項
• 配色とパレット
• 印刷に適したスタイル
• スタイル設定の完全な例

高度な機能

メソッドとイベント

📄 参照先： references/methods-and-events.md

参照するタイミング： 動的な更新、ユーザー操作への対応、プログラムによる制御を実装する場合

内容：

• ポインターを動的に更新する setPointerValue() メソッド
• 注釈を更新する setAnnotationValue() メソッド
• ゲージを印刷する print() メソッド
• 再レンダリングする refresh() メソッド
• Load イベントと Loaded イベント
• AnimationComplete イベント
• ラベルをカスタマイズする AxisLabelRendering イベント
• AnnotationRendering イベント
• ユーザー操作のための ValueChange イベント
• TooltipRendering イベント
• ResizeCompleted イベント
• 実用的なシナリオを含むイベントハンドラーの完全な例

ユーザー操作

📄 参照先： references/user-interaction.md

参照するタイミング： ツールチップ、ドラッグ操作、マウス／タッチイベント、値の変更を有効にする場合

内容：

• ツールチップの設定とカスタマイズ
• カスタム HTML を使ったツールチップテンプレート
• ポインターのドラッグによる値の変更
• ポインター操作の有効化／無効化
• マウスイベントとタッチイベントの処理
• 値の変更の追跡とコールバック
• ユーザー操作時のアニメーション
• インタラクティブな例の全体

アクセシビリティと国際化

📄 参照先： references/accessibility-and-internationalization.md

参照するタイミング： WCAG 準拠、キーボード操作、スクリーンリーダー、グローバルアプリケーションを実装する場合

内容：

• アクセシビリティの概要（WCAG 2.1 レベル AA 準拠）
• キーボード操作のサポート
• スクリーンリーダーとの互換性
• ARIA 属性とラベル
• ハイコントラストモードのサポート
• フォーカスインジケーター
• 国際化（i18n）の設定
• ロケールごとの数値形式
• RTL（右から左）サポート
• アクセシビリティ実装の完全な例

---

クイックスタートの例

Blazor Linear Gauge を使い始めるための最小限の例を紹介します。

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Title="Temperature Monitor">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°C"></LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="65" Color="#007bff">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="0" End="40" Color="#4CAF50"></LinearGaugeRange>
                <LinearGaugeRange Start="40" End="80" Color="#FFC107"></LinearGaugeRange>
                <LinearGaugeRange Start="80" End="120" Color="#F44336"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

結果： 0°C から 120°C までの温度を示す縦型の線形ゲージです。3つの色分けされた範囲（緑、黄、赤）と、65°C を示すポインターが表示されます。

---

よく使われるパターン

パターン 1：シンプルな進捗インジケーター

使用例： 完了率または進捗状況を表示する

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Orientation="Syncfusion.Blazor.LinearGauge.Orientation.Horizontal" Width="400px" Height="80px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="75" Type="Syncfusion.Blazor.LinearGauge.Point.Bar" 
                                    Color="#28a745" Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

パターン 2：マルチスケールのダッシュボードゲージ

ユースケース： 1 つのゲージに複数の指標を表示する

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="60" Color="#007bff"></LinearGaugePointer>
                <LinearGaugePointer PointerValue="80" Color="#dc3545"></LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

パターン 3：インタラクティブな値調整

ユースケース： ポインターをドラッグしてユーザーが値を変更できるようにする

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeEvents ValueChange="@OnValueChange"></LinearGaugeEvents>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@currentValue" 
                                    EnableDrag="true">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double currentValue = 50;
    
    private void OnValueChange(ValueChangeEventArgs args)
    {
        currentValue = args.Value;
    }
}

パターン 4：スタイル付き温度計

ユースケース： 視覚的なゾーンで温度を表示する

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Width="150px" Height="400px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="-20" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°">
            </LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@temperature" 
                                    Type="Syncfusion.Blazor.LinearGauge.Point.Bar"
                                    Color="#ff6b6b"
                                    Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="-20" End="0" Color="#0099ff"></LinearGaugeRange>
                <LinearGaugeRange Start="0" End="25" Color="#00e676"></LinearGaugeRange>
                <LinearGaugeRange Start="25" End="120" Color="#ff5252"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double temperature = 35;
}

---

API リファレンス

公式の Linear Gauge API は、SfLinearGauge コンポーネントを中心に構成されており、軸、ポインター、範囲、注釈、グラデーション、ツールチップ、イベントハンドラーを設定するための包括的な子コンポーネントを備えています。このリファレンスは、公式の Syncfusion Blazor Linear Gauge API ドキュメントに基づいています。

SfLinearGauge

ゲージの主要なコンテナーコンポーネントです。すべてのゲージ要素を格納するルートコンポーネントです。

コンポーネントのプロパティ：

サイズとレイアウト：

• Width (string)：リニアゲージコンテナーの幅を設定します
• Height (string)：リニアゲージコンテナーの高さを設定します
• Orientation (Orientation)：ゲージの向き（Horizontal または Vertical）を設定します
• Description (string)：アクセシビリティ向けの説明を設定します

外観：

• Title (string)：ゲージに表示するタイトルのテキストを設定します
• TitleStyle (LinearGaugeTitleStyle)：タイトルのフォント、位置、スタイルを設定します
• Background (string)：ゲージコンテナーの背景色を設定します
• Theme (Theme)：定義済みのテーマ（Bootstrap、Material、Fabric、Fluent、Tailwind など）を適用します
• Container (LinearGaugeContainer)：コンテナーの外観と境界線を設定します
• Margin (LinearGaugeMargin)：左、右、上、下の余白を設定します

動作：

• AnimationDuration (double)：初期描画とポインター更新のアニメーション時間をミリ秒単位で設定します
• Format (string)：軸ラベルの数値形式を設定します
• EnableGroupingSeparator (bool)：数値の桁区切りを有効にします
• ID (string)：ゲージコンポーネントの一意の識別子を設定します
• TabIndex (int)：キーボード操作時のタブ順を設定します

エクスポートと印刷：

• AllowPrint (bool)：印刷機能を有効にします
• AllowPdfExport (bool)：PDF エクスポート機能を有効にします
• AllowImageExport (bool)：画像（PNG、SVG）へのエクスポート機能を有効にします
• AllowMargin (bool)：印刷またはエクスポート時に余白を含めます

スタイル設定：

• RangePalettes (string[])：範囲に適用する自動カラーパレットを定義します

メソッド：

// Update pointer value programmatically (async version)
public async Task SetPointerValueAsync(int axisIndex, int pointerIndex, double value)

// Update annotation content dynamically (async version)
public async Task SetAnnotationValueAsync(int annotationIndex, string content)

// Refresh the entire gauge (async version)
public async Task RefreshAsync()

// Print the gauge (requires AllowPrint="true")
public async Task PrintAsync()

// Export gauge to file (requires corresponding AllowXyzExport="true")
public async Task ExportAsync(ExportType type, string fileName, 
    PdfPageOrientation? orientation = null, bool allowDownload = true)

エクスポート形式：

• ExportType.PNG
• ExportType.SVG
• ExportType.PDF

LinearGaugeAxes と LinearGaugeAxis

1 つ以上の軸を格納するコンテナー（LinearGaugeAxes）です。各 LinearGaugeAxis は、範囲、目盛り、ラベル、ポインター、範囲を含むスケールを定義します。

LinearGaugeAxis のプロパティ：

スケールの設定：

• Minimum (double)：軸スケールの最小値を設定します
• Maximum (double)：軸スケールの最大値を設定します
• IsInversed (bool)：軸の方向を反転します（小さい値から大きい値ではなく、大きい値から小さい値へ）
• OpposedPosition (bool)：軸を反対側に配置します（垂直の場合は左／右、水平の場合は上／下）
• ShowLastLabel (bool)：軸の最後のラベルを表示または非表示にします

子コンポーネント：

• LinearGaugeLine - 軸線の外観を設定します
• LinearGaugeMajorTicks - 軸の主目盛りです
• LinearGaugeMinorTicks - 軸の補助目盛りです
• LinearGaugeAxisLabelStyle - ラベルのスタイルと位置を設定します
• LinearGaugeAxisLabelFont - 軸ラベルのフォントプロパティです
• LinearGaugeContainer - 軸のコンテナーです
• LinearGaugePointers - この軸のポインターコレクションです
• LinearGaugeRanges - この軸の範囲コレクションです
• LinearGaugeLinearGradient - 軸要素の線形グラデーション塗りつぶしです
• LinearGaugeRadialGradient - 軸要素の放射状グラデーションです

軸線と目盛り

LinearGaugeLine - 軸線の外観を定義します

• Height (double)：軸線の高さ
• Width (double)：軸線の幅
• Color (string)：軸線の色
• Offset (double)：軸からのオフセット

LinearGaugeMajorTicks - 主目盛りの設定

• Interval (double)：主目盛りの間隔
• Height (double)：主目盛りの高さ
• Width (double)：主目盛りの幅
• Color (string)：主目盛りの色
• Position (Position)：軸に対する位置（Inside、Outside、Cross）
• Offset (double)：軸線からのオフセット

LinearGaugeMinorTicks - 補助目盛りの設定

• Interval (double)：補助目盛りの間隔
• Height (double)：補助目盛りの高さ
• Width (double)：補助目盛りの幅
• Color (string)：補助目盛りの色
• Position (Position)：軸に対する位置
• Offset (double)：軸線からのオフセット

軸ラベル

LinearGaugeAxisLabelStyle - ラベルのスタイルと配置

• Format (string)：ラベル値の書式文字列（例："{value}°C"）
• Position (Position)：ラベルの位置（Inside、Outside、Cross）
• Offset (double)：軸線からの距離
• FontFamily (string)：ラベルのフォントファミリー
• Color (string)：ラベルテキストの色
• Opacity (double)：ラベルの不透明度（0～1）

LinearGaugeAxisLabelFont - 軸ラベルのフォントプロパティ

• FontFamily (string)：フォントファミリー名
• FontSize (string)：ピクセル単位または相対単位でのフォントサイズ
• FontStyle (string)：フォントスタイル（normal、italic、oblique）
• FontWeight (string)：フォントの太さ（normal、bold、lighter、bolder、100-900）

LinearGaugePointers と LinearGaugePointer

1つ以上の値インジケーターを格納するコンテナー（LinearGaugePointers）です。各 LinearGaugePointer は軸上の値を表します。

LinearGaugePointer のプロパティ：

値と種類：

• PointerValue (double)：ポインターの値を設定します
• Type (PointerType)：ポインターの種類（Marker または Bar）
• MarkerType (MarkerType)：マーカーポインターの形状：
  • Circle
  • Rectangle
  • Triangle
  • Diamond
  • InvertedTriangle

外観：

• Color (string)：ポインターの色
• Width (double)：ポインターの幅
• Height (double)：ポインターの高さ
• Opacity (double)：ポインターの不透明度（0～1）
• Offset (double)：軸線からのオフセット
• Placement (Placement)：軸に対する配置（Center、Near、Far）
• RoundedCornerRadius (double)：角丸の半径（バー型ポインター）

コンテンツ：

• ImageUrl (string)：画像ポインターの URL
• Text (string)：テキストポインターに表示するテキスト

インタラクション：

• EnableDrag (bool)：ユーザーがポインターをドラッグして値を変更できるようにします
• AnimationDuration (double)：値の変更アニメーションの時間（ミリ秒）

子コンポーネント：

• LinearGaugePointerBorder - ポインターの境界線のスタイル
• LinearGaugeMarkerTextStyle - テキストポインターのテキストスタイル

ポインターのスタイル

LinearGaugePointerBorder - ポインターの境界線のプロパティ

• Color (string)：境界線の色
• Width (double)：境界線の幅

LinearGaugeMarkerTextStyle - ポインターテキストのスタイル

• FontFamily (string)：フォントファミリー
• FontSize (string)：フォントサイズ
• Color (string)：テキストの色
• FontWeight (string)：フォントの太さ
• Opacity (double)：テキストの不透明度

LinearGaugeRanges & LinearGaugeRange

色分けされた値の範囲を格納するコンテナー（LinearGaugeRanges）です。各 LinearGaugeRange は色付きの領域を定義します。

LinearGaugeRange のプロパティ：

範囲の定義：

• Start (double)：範囲の開始値
• End (double)：範囲の終了値

外観：

• Color (string)：範囲の背景色
• StartWidth (double)：範囲の開始位置での幅（幅のグラデーション効果用）
• EndWidth (double)：範囲の終了位置での幅
• Position (Position)：軸を基準にした位置（Inside、Outside、Cross）
• Offset (double)：軸線からのオフセット

子コンポーネント：

• LinearGaugeRangeBorder - 範囲の枠線スタイル
• LinearGaugeRangeTooltipSettings - 範囲のツールチップ（ホバー時）

LinearGaugeRangeBorder - 範囲の枠線プロパティ

• Color (string)：枠線の色
• Width (double)：枠線の幅

LinearGaugeAnnotations & LinearGaugeAnnotation

テキストや HTML のオーバーレイを格納するコンテナー（LinearGaugeAnnotations）です。各 LinearGaugeAnnotation はラベルまたはカスタムコンテンツを追加します。

LinearGaugeAnnotation のプロパティ：

コンテンツと配置：

• AxisValue (double)：注釈を表示する軸上の位置
• AxisIndex (int)：軸のインデックス（複数の軸がある場合）
• X (double)：軸の値からの水平方向のピクセルオフセット
• Y (double)：軸の値からの垂直方向のピクセルオフセット
• ZIndex (int)：レイヤーの順序（値が大きいほど前面に表示）
• HorizontalAlignment (Alignment)：水平方向の配置（Near、Center、Far）
• VerticalAlignment (Alignment)：垂直方向の配置

コンテンツ：

• Content (string)：注釈に表示するテキストまたは HTML コンテンツ
• ContentTemplate (RenderFragment)：注釈コンテンツを描画するためのテンプレート

子コンポーネント：

• LinearGaugeAnnotationFont - テキスト注釈のフォントスタイル

LinearGaugeAnnotationFont - 注釈のフォントプロパティ

• FontFamily (string)：フォントファミリー
• FontSize (string)：フォントサイズ
• Color (string)：テキストの色
• FontWeight (string)：フォントの太さ
• Opacity (double)：テキストの不透明度

グラデーションの設定

LinearGaugeLinearGradient - ゲージ要素の線形グラデーション

• StartValue (double)：グラデーションの開始位置
• EndValue (double)：グラデーションの終了位置
• ColorStops (ColorStops)：カラーストップのコレクション

LinearGaugeRadialGradient - ゲージ要素の放射状グラデーション

• Radius (string)：放射状グラデーションの半径
• InnerPosition (InnerPosition)：内側の円の位置
• OuterPosition (OuterPosition)：外側の円の位置
• ColorStops (ColorStops)：カラーストップのコレクション

ColorStop / ColorStops - グラデーションの色の定義

• Offset (string)：グラデーション内の位置（例：「0%」、「100%」）
• Color (string)：この位置での色
• Opacity (double)：この位置での不透明度

コンテナーと枠線のスタイル

LinearGaugeContainer - ゲージの外側コンテナー

• Type (ContainerType)：コンテナーの種類（Normal、RoundedRectangle、Thermometer）
• Offset (double)：軸からのオフセット
• Width (double)：コンテナーの幅
• BackgroundColor (string)：背景色
• Border (LinearGaugeContainerBorder)：枠線のスタイル

LinearGaugeContainerBorder - コンテナーの枠線プロパティ

• Color (string)：枠線の色
• Width (double)：枠線の幅

LinearGaugeBorder / LinearGaugeBorderSettings - ゲージの枠線プロパティ

• Color (string)：枠線の色
• Width (double)：枠線の幅

LinearGaugeMargin / LinearGaugeMarginSettings - マージンの設定

• Left (double)：左マージン
• Right (double)：右マージン
• Top (double)：上マージン
• Bottom (double)：下マージン

ツールチップの設定

LinearGaugeTooltipSettings - ポインターのツールチップ設定

• Enable (bool)：ツールチップを有効または無効にします
• Format (string)：ツールチップのテキスト形式
• Position (TooltipPosition)：ツールチップの位置（Top、Bottom、Left、Right）
• Fill (string)：ツールチップの背景色
• Opacity (double)：ツールチップの不透明度
• ShowAtMousePosition (bool)：ポインターではなくカーソル位置に表示します
• TextStyle (LinearGaugeTooltipTextStyle)：テキストのスタイル設定
• Border (LinearGaugeTooltipBorder)：枠線のスタイル設定

LinearGaugeRangeTooltipSettings - 範囲のホバー時のツールチップ設定

• 範囲にホバーしたときのツールチップ設定には、ツールチップ設定と同様のプロパティがあります

LinearGaugeTooltipTextStyle - ツールチップのテキストスタイル設定

• FontFamily (string)、FontSize (string)、Color (string)、FontWeight (string)、Opacity (double)

イベントとイベント引数

LinearGaugeEvents - イベントハンドラーコンポーネント

@using Syncfusion.Blazor.LinearGauge

<LinearGaugeEvents 
    Load="OnLoad"
    Loaded="OnLoaded"
    AxisLabelRendering="OnAxisLabelRendering"
    AnnotationRendering="OnAnnotationRendering"
    ValueChange="OnValueChange"
    TooltipRendering="OnTooltipRendering"
    DragStart="OnDragStart"
    DragMove="OnDragMove"
    DragEnd="OnDragEnd"
    AnimationComplete="OnAnimationComplete"
    ResizeCompleted="OnResizeCompleted"
    OnGaugeMouseDown="OnMouseDown"
    OnGaugeMouseLeave="OnMouseLeave"
    OnGaugeMouseUp="OnMouseUp"
    Print="OnPrint">
</LinearGaugeEvents>

イベントの種類と引数：

イベント	引数の型	説明
Load	LoadEventArgs	ゲージの描画前に発生します。args.Cancel = true でキャンセルできます
Loaded	LoadedEventArgs	ゲージの描画が正常に完了した後に発生します
AxisLabelRendering	AxisLabelRenderEventArgs	軸ラベルの描画前に発生します。args.Text を変更してカスタマイズできます
AnnotationRendering	AnnotationRenderEventArgs	注釈の描画前に発生します。args.Content を変更してカスタマイズできます
ValueChange	ValueChangeEventArgs	ポインターの値が変更されたとき（ユーザーによるドラッグまたはプログラムによる変更）に発生します。Value、PointerIndex、AxisIndex が提供されます
TooltipRendering	TooltipRenderEventArgs	ツールチップの表示前に発生します。args.Content をカスタマイズできます
DragStart	PointerDragEventArgs	ユーザーがポインターのドラッグを開始したときに発生します。CurrentValue、PointerIndex、AxisIndex が提供されます
DragMove	PointerDragEventArgs	ポインターのドラッグ中に継続的に発生します。現在の値が提供されます
DragEnd	PointerDragEventArgs	ドラッグ後にユーザーがポインターを離したときに発生します
AnimationComplete	AnimationCompleteEventArgs	ポインターのアニメーションが完了したときに発生します
ResizeCompleted	ResizeEventArgs	ゲージのサイズ変更後に発生します。CurrentSize、PreviousSize が提供されます
OnGaugeMouseDown	MouseEventArgs	ゲージ上でマウスボタンが押されたときに発生します
OnGaugeMouseLeave	MouseEventArgs	マウスがゲージから離れたときに発生します
OnGaugeMouseUp	MouseEventArgs	ゲージ上でマウスボタンが離されたときに発生します
Print	PrintEventArgs	印刷前に発生します

列挙型

Orientation - ゲージのレイアウト方向

Orientation.Horizontal  // Horizontal scale
Orientation.Vertical    // Vertical scale

Position - 軸に対する要素の位置

Position.Inside      // Inside the axis
Position.Outside     // Outside the axis
Position.Cross       // Crossing the axis line

PointerType - 値を示すインジケーターの種類

PointerType.Marker   // Shaped marker (circle, square, etc.)
PointerType.Bar      // Bar/rectangle pointer

MarkerType - マーカーポインターの形状

MarkerType.Circle
MarkerType.Rectangle
MarkerType.Triangle
MarkerType.Diamond
MarkerType.InvertedTriangle

Placement - 軸に対するポインターの位置

Placement.Center     // Centered on axis
Placement.Near       // Near side
Placement.Far        // Far side

ContainerType - コンテナーの形状

ContainerType.Normal              // Rectangular container
ContainerType.RoundedRectangle    // Rounded rectangle
ContainerType.Thermometer         // Thermometer shape

ExportType - エクスポート形式

ExportType.PNG   // Export as PNG image
ExportType.SVG   // Export as SVG image
ExportType.PDF   // Export as PDF document

TooltipPosition - ツールチップの配置

TooltipPosition.Top      // Above the pointer
TooltipPosition.Bottom   // Below the pointer
TooltipPosition.Left     // Left of pointer
TooltipPosition.Right    // Right of pointer

Theme - 定義済みのカラーテーマ

Theme.Bootstrap
Theme.Material
Theme.Fabric
Theme.Fluent
Theme.Tailwind
Theme.Bootstrap5
Theme.FluentDark
Theme.MaterialDark
Theme.BootstrapDark
Theme.TailwindDark
// ... and others

主要なコンポーネント階層

SfLinearGauge (root)
├── LinearGaugeTitleStyle
├── LinearGaugeMargin
├── LinearGaugeBorder
├── LinearGaugeContainer
│   └── LinearGaugeContainerBorder
├── LinearGaugeAxes
│   └── LinearGaugeAxis (repeatable)
│       ├── LinearGaugeLine
│       ├── LinearGaugeMajorTicks
│       ├── LinearGaugeMinorTicks
│       ├── LinearGaugeAxisLabelStyle
│       ├── LinearGaugeAxisLabelFont
│       ├── LinearGaugeContainer
│       ├── LinearGaugeLinearGradient
│       ├── LinearGaugeRadialGradient
│       ├── LinearGaugePointers
│       │   └── LinearGaugePointer (repeatable)
│       │       ├── LinearGaugePointerBorder
│       │       └── LinearGaugeMarkerTextStyle
│       └── LinearGaugeRanges
│           └── LinearGaugeRange (repeatable)
│               ├── LinearGaugeRangeBorder
│               └── LinearGaugeRangeTooltipSettings
├── LinearGaugeAnnotations
│   └── LinearGaugeAnnotation (repeatable)
│       └── LinearGaugeAnnotationFont
├── LinearGaugeTooltipSettings
│   ├── LinearGaugeTooltipTextStyle
│   └── LinearGaugeTooltipBorder
└── LinearGaugeEvents
    ├── Load handler
    ├── Loaded handler
    ├── AxisLabelRendering handler
    ├── AnnotationRendering handler
    ├── ValueChange handler
    ├── TooltipRendering handler
    ├── DragStart/Move/End handlers
    ├── AnimationComplete handler
    └── ... more event handlers

API の実践的な使用上の注意

1. 非同期メソッド：すべてのコンポーネントメソッド（SetPointerValueAsync、SetAnnotationValueAsync、RefreshAsync、PrintAsync、ExportAsync）は非同期であり、awaitする必要があります。

2. エクスポートの前提条件：対応するエクスポートメソッドまたは印刷メソッドを呼び出す前に、ゲージでAllowPdfExport="true"、AllowImageExport="true"、またはAllowPrint="true"が設定されていることを確認してください。

3. アニメーション：即座に更新するにはAnimationDuration="0"を設定し、滑らかなアニメーション遷移にするにはより大きな値を設定します。

4. イベント引数：イベントハンドラーの引数はフレームワークによって提供され、状況に応じた情報が含まれます（例：ValueChangeEventArgsには新しい値が含まれます）。

5. インデックスによるアクセス：SetPointerValueAsyncまたはSetAnnotationValueAsyncを使用する場合は、軸、ポインター、注釈に0始まりのインデックスを使用してください。

6. パフォーマンス：頻繁に更新する場合（例：100msごと）、更新をまとめるか、アニメーションのオーバーヘッドを避けるためにAnimationDuration="0"を使用することを検討してください。

7. アクセシビリティ：ゲージをスクリーンリーダーから利用できるようにする必要がある場合は、Description、Title、適切なARIAラベルを使用してください。

コンポーネントの全一覧

コンポーネントクラス（Syncfusion.Blazor.LinearGauge 名前空間）：

1. SfLinearGauge - メインコンポーネント
2. LinearGaugeAnnotation - 注釈要素
3. LinearGaugeAnnotationFont - 注釈のフォントスタイル
4. LinearGaugeAnnotations - 注釈コレクション
5. LinearGaugeAxes - 軸コレクション
6. LinearGaugeAxis - 軸の構成
7. LinearGaugeAxisLabelFont - 軸ラベルのフォント
8. LinearGaugeAxisLabelStyle - 軸ラベルのスタイル
9. LinearGaugeBorder - ゲージの枠線
10. LinearGaugeBorderSettings - 枠線の設定
11. LinearGaugeContainer - コンテナーの構成
12. LinearGaugeContainerBorder - コンテナーの枠線
13. LinearGaugeEvents - イベントハンドラー
14. LinearGaugeFontSettings - フォントの設定
15. LinearGaugeLine - 軸線
16. LinearGaugeLinearGradient - 線形グラデーション
17. LinearGaugeMajorTicks - 主目盛り
18. LinearGaugeMargin - マージンの設定
19. LinearGaugeMarginSettings - マージンの構成
20. LinearGaugeMarkerTextStyle - マーカーのテキストスタイル
21. LinearGaugeMinorTicks - 副目盛り
22. LinearGaugePointer - ポインター要素
23. LinearGaugePointerBorder - ポインターの枠線
24. LinearGaugePointers - ポインターコレクション
25. LinearGaugeRadialGradient - 放射状グラデーション
26. LinearGaugeRange - 範囲要素
27. LinearGaugeRangeBorder - 範囲の枠線
28. LinearGaugeRangeTooltipBorder - 範囲ツールチップの枠線
29. LinearGaugeRangeTooltipSettings - 範囲ツールチップ
30. LinearGaugeRangeTooltipTextStyle - 範囲ツールチップのテキスト
31. LinearGaugeRanges - 範囲コレクション
32. LinearGaugeTickSettings - 目盛りの設定
33. LinearGaugeTitleStyle - タイトルのスタイル
34. LinearGaugeTooltipBorder - ツールチップの枠線
35. LinearGaugeTooltipSettings - ツールチップの設定
36. LinearGaugeTooltipTextStyle - ツールチップのテキストスタイル
37. LinearGradient - 線形グラデーションの定義
38. RadialGradient - 放射状グラデーションの定義
39. ColorStop - グラデーションの色の停止点
40. ColorStops - グラデーションの色の停止点コレクション
41. Point - ポインター型の列挙型
42. GradientPosition - グラデーションの位置
43. InnerPosition - 内側グラデーションの位置
44. OuterPosition - 外側グラデーションの位置

イベント引数クラス：

• LoadEventArgs
• LoadedEventArgs
• AxisLabelRenderEventArgs
• AnnotationRenderEventArgs
• ValueChangeEventArgs
• TooltipRenderEventArgs
• PointerDragEventArgs
• ResizeEventArgs
• MouseEventArgs
• PrintEventArgs
• AnimationCompleteEventArgs

列挙型：

• Orientation - 水平または垂直
• Position - 内側、外側、交差
• PointerType - マーカーまたはバー
• MarkerType - 円、四角形、三角形、ひし形、逆三角形
• Placement - 中央、近位、遠位
• ContainerType - 通常、角丸長方形、温度計
• ExportType - PNG、SVG、PDF
• TooltipPosition - 上、下、左、右
• Theme - 各種テーマオプション
• Alignment - 近位、中央、遠位
• PdfPageOrientation - 縦、横

---

一般的なユースケース

1. ダッシュボードの KPI 表示

状態をすばやく把握できるよう、色分けした範囲で重要業績評価指標を表示します。指標ごとに複数のゲージを使用します。

2. 温度のモニタリング

温度の読み取り値を、各ゾーン（氷点下、正常、警告、危険）に適した範囲で可視化します。

3. 進捗状況の追跡

水平ゲージのバー型ポインターを使って、タスクの完了状況、プロジェクトの進捗状況、目標の達成状況を表示します。

4. スピードメーター／タコメーター

速度や RPM を表示するため、スタイルを設定したポインターと範囲を備えた車両ダッシュボードのコンポーネントを作成します。

5. センサーデータの可視化

動的なポインターの更新としきい値インジケーターを使って、リアルタイムのセンサー読み取り値（圧力、湿度、電圧）を表示します。

6. アンケート／評価の表示

平均値を示すマーカーと分布の範囲を用いて、尺度上にアンケート結果や評価を可視化します。

7. 予算と実績の比較

同じ軸上に複数のポインターを使って、予算値と実績値を比較する財務指標を表示します。

8. 在庫レベル

在庫レベルを色分けされた範囲（危機的、低、適正、満杯）で表示し、状態をすばやく確認できるようにします。

---

実装のヒント

開始時

1. セットアップについては、getting-started.mdから始めます
2. 基本的な軸とポインターを追加して、機能を確認します
3. 範囲、スタイル、インタラクティブ機能を徐々に追加します

カスタマイズする場合

1. スケールのカスタマイズには、axes-configuration.mdを使用します
2. ポインターのスタイル設定には、pointers.mdを使用します
3. 全体的な見た目には、appearance-and-styling.mdを使用します

インタラクティブ機能を追加する場合

1. ユーザー入力を受け付けるには、ポインターのドラッグを有効にします
2. 値を表示するには、ツールチップを追加します
3. ユーザー操作に応答するには、イベントを使用します
4. user-interaction.mdとmethods-and-events.mdを参照してください

本番環境向け

1. accessibility-and-internationalization.mdに記載されているアクセシビリティ機能を実装します
2. キーボード操作でテストします
3. スクリーンリーダーとの互換性を確認します
4. 適切な ARIA ラベルを設定します

---

次のステップ

1. Linear Gauge を初めて使いますか？ getting-started.mdから始めます
2. 特定の機能が必要ですか？ 要件に応じて、関連するリファレンスファイルを参照します
3. ダッシュボードを作成していますか？ 複数のパターンを組み合わせ、appearance-and-styling.mdを参照します
4. インタラクティブ機能が必要ですか？ user-interaction.mdとmethods-and-events.mdを確認します

各リファレンスファイルは包括的で、それぞれ単独で完結しています。1 つのトピックについて、複数のファイルを行き来する必要はありません。