syncfusion-blazor-circular-gauge

Syncfusion Blazor CircularGauge の実装

NuGet: Syncfusion.Blazor.CircularGauge + Syncfusion.Blazor.Themes
Namespace: Syncfusion.Blazor.CircularGauge

Blazor アプリケーションで円形ゲージコンポーネントを実装するための包括的なガイドです。CircularGauge は、カスタマイズ可能な軸、ポインター、範囲、注釈、インタラクティブ機能を備えた放射状のデータ可視化を提供します。

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

次のような用途で使用します。

• ダッシュボードゲージ：円形のメトリック表示で KPI ダッシュボードを作成する
• スピードメーター／タコメーター：車両の計器パネルや速度インジケーターを作成する
• 温度／圧力インジケーター：環境または産業用センサーデータを表示する
• 進捗の可視化：円形の進捗インジケーターや完了状況を表示する
• ステータス表示：範囲（赤／黄／緑のゾーン）を備えた、色分けされたステータスゲージを作成する
• 複数メトリックの表示：1つのゲージに複数のポインターを配置し、複数の値を表示する
• リアルタイム監視：ライブデータの更新を円形形式で表示する
• インタラクティブなゲージ：ポインターをドラッグして値を調整できるようにする
• 放射状 KPI：パフォーマンスメトリックを放射状／円形レイアウトで可視化する

コンポーネントの概要

Syncfusion Blazor CircularGauge（SfCircularGauge）は、定量情報を円弧状に表示するデータ可視化コンポーネントです。複数のポインタータイプ、色分けされた範囲、カスタム注釈、凡例、豊富なインタラクティブ機能をサポートします。

主な機能：

• 複数のポインタータイプ（針、範囲バー、マーカー）
• カスタム範囲と角度を設定できる軸
• 視覚的なゾーンを示す色分けされた範囲
• テキスト、画像、または HTML コンテンツを含む注釈
• ツールチップとユーザー操作
• 値を調整するためのポインターのドラッグ
• 範囲の凡例
• アニメーションとトランジション
• グローバリゼーションと RTL のサポート
• アクセシビリティ機能（WCAG 準拠）
• 印刷およびエクスポート機能

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

はじめに

📄 参照： references/getting-started.md

次の作業が必要な場合は、このリファレンスを参照してください。

• NuGet パッケージをインストールし、コンポーネントをセットアップする
• サービスと CSS／テーマのインポートを設定する
• 最初の基本的な円形ゲージを作成する
• プロジェクトの構成と前提条件を理解する
• CircularGauge を使用してアプリケーションを実行する

軸の設定

📄 参照： references/axes-configuration.md

次の作業が必要な場合は、このリファレンスを参照してください。

• 軸の外観（線の幅、色、背景）をカスタマイズする
• スケールの最小値と最大値を設定する
• 軸の半径と位置を設定する
• 開始角度と終了角度を設定する（半円、四分円、カスタムの円弧）
• 軸の方向（時計回り／反時計回り）を設定する
• ラベル（書式、フォント、位置、回転、カスタムテキスト）をカスタマイズする
• 主目盛りと補助目盛り（間隔、サイズ、スタイル）を設定する
• 1つのゲージに複数の軸を実装する

ポインター

📄 参照： references/pointers.md

次の作業が必要な場合は、このリファレンスを参照してください。

• 外観をカスタマイズできる針ポインターを追加する
• 針のキャップ／ノブとテールのスタイルを設定する
• グラデーション付きの範囲バー型ポインターを実装する
• マーカーポインター（円、長方形、三角形、ひし形、画像）を追加する
• ポインターの値を設定し、ポインターの移動をアニメーション化する
• 1つの軸に異なるタイプのポインターを複数使用する
• インタラクティブな値調整のためにポインターのドラッグを有効にする
• ポインターを適切に配置し、レイヤー化する

範囲

📄 参照： references/ranges.md

次の作業が必要な場合は、このリファレンスを参照してください。

• ゲージ上に色分けされたゾーン（例：赤／黄／緑）を作成する
• 範囲の開始値と終了値を定義する
• 範囲の色、グラデーション、スタイルをカスタマイズする
• 範囲の位置（半径と太さ）を設定する
• 重なり合う複数の範囲を実装する
• 範囲の角を丸くする
• ステータスインジケーターやゾーンのマーキングに範囲を使用する

注釈

📄 参照: references/annotations.md

次の操作が必要な場合に、このリファレンスを参照してください。

• テキスト注釈を追加して値やラベルを表示する
• 注釈として HTML コンテンツや画像を挿入する
• 角度、半径、または X/Y 座標を使用して注釈を配置する
• 注釈のスタイルを設定する（フォント、色、背景、枠線）
• 1 つのゲージに複数の注釈を作成する
• 動的なコンテンツ（現在のポインター値など）を表示する
• ゲージの状態に基づく条件付き注釈を追加する
• ゲージの読み取り値を示す中央ラベルを配置する

凡例

📄 参照: references/legend.md

次の操作が必要な場合に、このリファレンスを参照してください。

• ゲージの範囲に凡例を有効にする
• 凡例を配置する（上、下、左、右、カスタム）
• 凡例の外観をカスタマイズする（フォント、色、形状、枠線）
• 切り替え機能を備えたインタラクティブな凡例を実装する
• カスタム凡例テンプレートを作成する
• 凡例のクリックイベントを処理する

外観とスタイル

📄 参照: references/appearance.md

次の操作が必要な場合に、このリファレンスを参照してください。

• 組み込みテーマ（Material、Bootstrap、Fluent など）を適用する
• 色、背景、枠線をカスタマイズする
• ゲージの寸法（幅、高さ、レスポンシブなサイズ設定）を構成する
• ゲージのタイトルを追加してスタイルを設定する
• 中央の X/Y 位置を構成する
• アニメーションを設定する（時間、イージング）
• 印刷およびエクスポート機能（画像/PDF）を実装する
• カスタムスタイルと CSS クラスを適用する

ユーザー操作

📄 参照: references/user-interaction.md

次の操作が必要な場合に、このリファレンスを参照してください。

• ツールチップを有効化してカスタマイズする
• カスタムツールチップテンプレートを作成する
• ユーザー入力用にポインターのドラッグを有効にする
• ドラッグイベント（DragStart、DragMove、DragEnd）を処理する
• ゲージイベント（Load、Loaded、AnimationComplete など）を実装する
• AxisLabelRendering イベントと TooltipRendering イベントを処理する
• ポインターのドラッグ範囲を制限する
• インタラクティブなゲージ（調整可能な温度、速度コントロール）を作成する

グローバリゼーション

📄 参照: references/globalization.md

次の操作が必要な場合に、このリファレンスを参照してください。

• ロケールに基づいて数値をフォーマットする
• カスタム数値パターンを実装する
• ラベルとテキストをローカライズする
• RTL（右から左）サポートを有効にする
• 通貨または日付/時刻の値をフォーマットする
• 国際化のために CLDR データを統合する

高度な機能

📄 参照: references/advanced-features.md

次の操作が必要な場合に、このリファレンスを参照してください。

• メソッド（SetPointerValue、SetAnnotationValue、Refresh、Print、Export）を使用する
• 実行時にポインター値を動的に更新する
• 複雑なゲージのパフォーマンスを最適化する
• ゲージを他のコンポーネント（グリッド、ダッシュボード、タブ）内に配置する
• タイマーまたは SignalR を使用してリアルタイムのデータ更新を実装する
• アクセシビリティ機能（WCAG、キーボードナビゲーション、スクリーンリーダー）を構成する
• レスポンシブデザインのパターンを実装する
• サーバーサイドと WebAssembly の違いを考慮する
• 複雑なゲージのシナリオをテストしてトラブルシューティングする

クイックスタートの例

針ポインターを備えた基本的な円形ゲージの例です。

@page "/circular-gauge"
@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

前提条件:

1. Syncfusion.Blazor.CircularGauge と Syncfusion.Blazor.Themes NuGet パッケージをインストールします
2. サービスを登録します: builder.Services.AddSyncfusionBlazor();
3. App.razor または index.html にテーマ CSS をインポートします

よく使われるパターン

パターン 1: スピードメーターゲージ

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120" StartAngle="220" EndAngle="140">
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="12px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeAxisLineStyle Width="10" Color="#E0E0E0">
            </CircularGaugeAxisLineStyle>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="40" Color="#30B32D"></CircularGaugeRange>
                <CircularGaugeRange Start="40" End="80" Color="#FFDD00"></CircularGaugeRange>
                <CircularGaugeRange Start="80" End="120" Color="#F03E3E"></CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Radius="60%" Color="#757575">
                    <CircularGaugePointerAnimation Enable="true" Duration="1500">
                    </CircularGaugePointerAnimation>
                    <CircularGaugeCap Radius="7">
                        <CircularGaugeCapBorder Width="3" Color="#757575">
                        </CircularGaugeCapBorder>
                    </CircularGaugeCap>
                    <CircularGaugeNeedleTail Length="18%" Color="#757575">
                    </CircularGaugeNeedleTail>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

パターン 2: 温度インジケーター

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="-20" Maximum="50">
            <CircularGaugeAxisLineStyle Width="0">
            </CircularGaugeAxisLineStyle>
            <CircularGaugeAxisMajorTicks Height="0"></CircularGaugeAxisMajorTicks>
            <CircularGaugeAxisMinorTicks Height="0"></CircularGaugeAxisMinorTicks>
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="0px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="-20" End="0" Color="#6495ED" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
                <CircularGaugeRange Start="0" End="20" Color="#FFA500" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
                <CircularGaugeRange Start="20" End="50" Color="#FF4500" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="22" Radius="0%" Type="PointerType.Marker" 
                                      MarkerShape="GaugeShape.Triangle" MarkerHeight="20" MarkerWidth="20" 
                                      Color="#333">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeAnnotations>
                <CircularGaugeAnnotation Angle="0" Radius="0%" ZIndex="1">
                    <ContentTemplate>
                        <div style="font-size:24px;font-weight:bold;color:#333;">22°C</div>
                    </ContentTemplate>
                </CircularGaugeAnnotation>
            </CircularGaugeAnnotations>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

パターン 3: 複数ポインターゲージ

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100">
            <CircularGaugePointers>
                <CircularGaugePointer Value="30" Color="#007DD1" PointerWidth="8" Radius="70%">
                </CircularGaugePointer>
                <CircularGaugePointer Value="60" Color="#E5CE20" PointerWidth="8" Radius="80%">
                </CircularGaugePointer>
                <CircularGaugePointer Value="90" Color="#F44336" PointerWidth="8" Radius="90%">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

パターン 4: 凡例付きの範囲ベースのステータスゲージ

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeLegendSettings Visible="true" Position="Syncfusion.Blazor.CircularGauge.LegendPosition.Bottom">
    </CircularGaugeLegendSettings>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100">
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="33" Color="#30B32D" LegendText="Good">
                </CircularGaugeRange>
                <CircularGaugeRange Start="33" End="66" Color="#FFDD00" LegendText="Warning">
                </CircularGaugeRange>
                <CircularGaugeRange Start="66" End="100" Color="#F03E3E" LegendText="Critical">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="75" Type="PointerType.RangeBar" Radius="60%" 
                                      PointerWidth="15" Color="#F03E3E">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

主なプロパティと構成

API リファレンス（概要）

名前空間 / インポート

• @using Syncfusion.Blazor.CircularGauge

コンポーネント: SfCircularGauge

コアプロパティ

• AllowImageExport (bool)
• AllowMargin (bool)
• AllowPdfExport (bool)
• AllowPrint (bool)
• AnimationDuration (double) — アニメーションの継続時間（ミリ秒）
• Background (string)
• CenterX (string)
• CenterY (string)
• Description (string)
• EnableGroupingSeparator (bool)
• EnablePointerDrag (bool)
• EnableRangeDrag (bool)
• Height (string)
• ID (string)
• MoveToCenter (bool)
• TabIndex (int)
• Theme (enum)
• Title (string)
• Width (string)

重要なメソッド

• Task<string> ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true)
• Task PrintAsync()
• Task RefreshAsync()
• Task SetAnnotationValueAsync(int axisIndex, int annotationIndex, string content)
• Task SetPointerValueAsync(int axisIndex, int pointerIndex, double pointerValue)
• void SetRangeValue(int axisIndex, int rangeIndex, double start, double end)
• void UpdateChildProperties(string key, object keyValue)

イベント（共通）

• AnimationCompleted (AnimationCompleteEventArgs)
• AnnotationRendering (AnnotationRenderEventArgs)
• AxisLabelRendering (AxisLabelRenderEventArgs)
• Loaded / OnLoad (LoadedEventArgs)
• OnGaugeMouseDown / OnGaugeMouseMove / OnGaugeMouseUp / OnGaugeMouseLeave (MouseEventArgs)
• OnDrag、OnDragStart、OnDragEnd (PointerDragEventArgs)
• OnPrint (PrintEventArgs)
• OnRadiusCalculate (RadiusCalculateEventArgs)
• Resizing (ResizeEventArgs)
• TooltipRendering (TooltipRenderEventArgs)

子タグと主要プロパティ

• CircularGaugeAnnotation — Content、Angle、Radius、AutoAngle
• CircularGaugeAxes — CircularGaugeAxis のコレクション
• CircularGaugeAxis — Background、Direction、EndAngle、StartAngle、Maximum、Minimum、Radius
• CircularGaugeBorder — Color、Width
• CircularGaugeLegendSettings — Visible、Position、Shape、ToggleVisibility
• CircularGaugeMargin — Top、Bottom、Left、Right
• CircularGaugePointer — Type、Value、Color、MarkerShape、Position、PointerWidth、Radius
• CircularGaugeRange — Start、End、Color、StartWidth、EndWidth、Radius
• CircularGaugeTooltipSettings — Enable、Fill、Format、ShowAtMousePosition

スタイル設定用 CSS クラス

• e-circulargauge
• e-gauge-axis
• e-gauge-pointer
• e-gauge-range
• e-gauge-annotation

一般的な使用例

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge Title="Basic Circular Gauge" Height="400px" Width="400px">
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100" StartAngle="200" EndAngle="160">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1" PointerWidth="8">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="50" Color="#3A5998" StartWidth="10" EndWidth="10">
                </CircularGaugeRange>
                <CircularGaugeRange Start="50" End="100" Color="#33BCDA" StartWidth="10" EndWidth="10">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

一般的なユースケース

1. ダッシュボードの KPI 表示：売上実績、顧客満足度、達成率などの業績指標を表示します
2. 車両の計器：スピードメーター、タコメーター、燃料計、バッテリーインジケーターを作成します
3. 環境モニタリング：温度、湿度、気圧、空気質の測定値を表示します
4. 産業用制御：機械の状態、圧力レベル、RPM、負荷率を表示します
5. 健康とフィットネス：心拍数、歩数、消費カロリー、運動強度を可視化します
6. リソース使用率：CPU 使用率、メモリ消費量、ディスク容量、ネットワーク帯域幅を表示します
7. 進捗状況の追跡：プロジェクトの完了状況、タスクの進捗状況、マイルストーンの達成状況を表示します
8. 品質指標：不良率、テスト合格率、コンプライアンススコアを表示します
9. 財務指標：ポートフォリオの実績、リスクレベル、予算の使用率を表示します
10. インタラクティブな設定：ユーザーがサーモスタットの設定、音量、明るさを調整できるようにします

関連スキル

• リニアゲージの実装 - 水平／垂直のリニアゲージ表示向け

---

次のステップ： 実装のニーズに応じたリファレンスファイルをお読みください。新規実装の場合は getting-started.md から始めるか、特定の機能ドキュメントに直接移動してください。