syncfusion-maui-radial-gauge

.NET MAUI 放射状ゲージの実装

概要

Syncfusion® .NET MAUI 放射状ゲージ（SfRadialGauge）は、円形の目盛り上に数値を表示する、多用途のデータ可視化コントロールです。速度計、温度モニター、ダッシュボード、進捗インジケーター、コンパスなど、円形のメトリック表示の作成に最適です。

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

次のようなニーズがある場合に、このスキルを使用してください。

• 円形ゲージを作成する - 速度計、タコメーター、温度計、圧力計
• ダッシュボードの可視化を構築する - KPI 表示、メトリックのモニタリング、ステータスインジケーター
• 進捗を表示する - 円形プログレスバー、完了インジケーター、読み込み状態
• 範囲を表示する - 色分けされたゾーン（安全／警告／危険）、しきい値インジケーター
• インタラクティブなコントロールを実装する - ドラッグ可能なダイヤル、調整可能な設定、ユーザー入力コントロール
• アニメーション付きの遷移を追加する - 値の滑らかな変化、リアルタイムのデータ更新
• コンパス／方向表示を構築する - ナビゲーション補助、向きのインジケーター

コンポーネントの概要

SfRadialGauge コントロールは、次の機能を提供します。

• 複数のポインタータイプ：値を多様な方法で示す 4 種類のポインタースタイル（針、図形、コンテンツ、範囲）
• 柔軟な軸設定：カスタマイズ可能な目盛り範囲、角度（全円、半円、円弧）、ラベル、目盛り
• 視覚的な範囲インジケーター：安全／警告／危険を視覚化する、グラデーションに対応した色分けゾーン
• カスタム注釈：角度または軸の値を指定して、特定の位置にテキスト、画像、任意の .NET MAUI ビューを配置
• アニメーションシステム：設定可能な継続時間とイージング関数を使用した、ポインターの滑らかな遷移
• インタラクティブなコントロール：ValueChanged／ValueChanging イベントを備えたドラッグ可能なポインターによるユーザー入力
• 複数軸のサポート：1 つのゲージに複数の軸を表示し、複雑な複数メトリックの可視化を実現
• スタイル設定オプション：色、グラデーション、太さ（ピクセルまたは係数ベースのサイズ指定）を包括的にカスタマイズ

主な機能

• 柔軟な軸 - 線形／カスタムの目盛り、カスタマイズ可能なラベル、目盛り、スタイル
• 視覚的な範囲 - 値をすばやく解釈できる色分けゾーン
• 4 種類のポインター - 針、図形（マーカー）、コンテンツ（カスタムビュー）、範囲（円弧）
• 複数のポインター - 同じゲージ上に複数の値を表示
• 注釈 - 特定の位置にテキスト、画像、カスタムビューを追加
• アニメーション - カスタマイズ可能なイージングによる滑らかな遷移
• インタラクティブ - ユーザー入力に対応するドラッグ可能なポインター
• 高度なカスタマイズ性 - 外観と動作を完全に制御

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

はじめに

📄 参照： references/getting-started.md

次のようなニーズがある場合：

• 放射状ゲージパッケージをインストールして設定する
• NuGet パッケージと依存関係を構成する
• MauiProgram.cs にハンドラーを登録する
• 最初の基本的な放射状ゲージを作成する
• 基本的な構造とコンポーネントを理解する
• すぐに動作するサンプルを用意する

軸の設定

📄 参照： references/axes.md

次のようなニーズがある場合：

• 軸の目盛りを設定する（最小値、最大値、間隔）
• 軸の開始角度と終了角度をカスタマイズする（円形、半円形、円弧）
• 軸線のスタイルを設定する（太さ、色、グラデーション）
• ラベルを設定する（位置、回転、書式、カスタムテキスト）
• 目盛りをカスタマイズする（主目盛り／副目盛り、長さ、位置、スタイル）
• ゲージに背景コンテンツを追加する
• 1 つのゲージに複数の軸を作成する
• 軸の位置指定と係数ベースのレイアウトを理解する

範囲と視覚的なインジケーター

📄 参照： references/ranges.md

次のようなニーズがある場合：

• 色分けされた範囲を作成する（例：安全／警告／危険ゾーン）
• 範囲の開始値と終了値を設定する
• 範囲のスタイルを設定する（色、グラデーション、幅）
• 範囲の位置を指定する（オフセット、軸の内側／外側）
• 複数の範囲を追加してゾーンを可視化する
• 範囲の端点をカスタマイズする（丸形、平形）
• 360° ゲージ用に逆順の範囲を作成する
• 速度計スタイルのインジケーターを構築する

ポインター（すべての種類）

📄 参照： references/pointers.md

次のような場合にお読みください。

• ニードルポインター - ノブとテールが付いた標準的なゲージ針
• シェイプポインター - マーカー記号（円、ひし形、三角形など）
• コンテンツポインター - カスタムビュー（テキスト、画像、複雑なレイアウト）
• 範囲ポインター - 開始位置から値まで塗りつぶされる色付きの弧
• ポインターの値を設定し、遷移をアニメーション化する
• 1つのゲージに複数のポインターを追加する
• ポインターの外観（色、サイズ、形状）をカスタマイズする
• ポインターの位置を調整する（軸からのオフセット）
• 用途に合ったポインターの種類を選ぶ

注釈

📄 参照： references/annotation.md

次のような場合にお読みください。

• 値や単位を表示するテキストラベルを追加する
• ゲージ上に画像やアイコンを配置する
• 特定の位置にカスタムビューを追加する
• 角度または軸の値を使って注釈を配置する
• 半径方向の距離（位置係数）を調整する
• 複数の注釈を作成する
• ポインターの値に応じて動的なコンテンツを表示する
• ラベルやステータスインジケーターを含む複雑なゲージレイアウトを構築する

アニメーションとインタラクション

📄 参照： references/animation-and-interaction.md

次のような場合にお読みください。

• ポインターの滑らかなアニメーションを有効にする
• アニメーションの時間とイージングを設定する
• スプリング効果やバウンス効果を作成する
• ユーザー入力に応じてポインターをドラッグ可能にする
• ポインターの値の変化を処理する
• ユーザーの操作に応答する
• インタラクティブなコントロール（音量、明るさ、設定）を構築する
• アニメーションのパフォーマンスを最適化する