syncfusion-wpf-radial-gauge

円形ゲージの実装（ラジアルゲージ）

Syncfusion® WPF Radial Gauge (SfCircularGauge) コンポーネントを実装し、円形スケール上に数値を表示するための包括的なガイドです。このスキルを使うと、針、範囲、インタラクティブ機能を備えた、スピードメーター、温度インジケーター、KPI ダッシュボード、進捗メーターなど、高度にカスタマイズ可能なゲージを作成できます。

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

次のような場合に、このスキルを使用してください。

• 円形ゲージを作成する（スピードメーター、KPI メーター、温度ゲージなどのデータ可視化）
• 針ポインターを実装する（円形スケール上で現在の値を示す）
• 範囲ポインターを追加する（進捗や完了状況を色付きの弧で表示する）
• シンボルポインターを設定する（マーカー形式の値インジケーターを表示する）
• スケールを設定する（開始値／終了値、角度、間隔を指定する）
• ビジュアル範囲を追加する（低、中、高、危険などのゾーンを示す）
• ゲージスケールのラベルと目盛りをカスタマイズする
• ポインターのドラッグを有効にする（インタラクティブに値を選択する）
• ポインターの動きをアニメーション化する（滑らかな遷移を実現する）
• 注釈を追加する（ゲージに追加情報を表示する）
• 複数スケールのゲージを作成する（複数の指標を比較する）
• 複数のゲージを使ったダッシュボードの可視化を構築する

このスキルは、カスタマイズ可能なポインター、範囲、ビジュアルインジケーターを使って、円形スケール上に数値を表示する円形／ラジアル形式の可視化を作成する際に不可欠です。

コンポーネントの概要

SfCircularGauge は、円形スケール上に数値を表示する強力なデータ可視化コンポーネントです。高度にカスタマイズ可能で、複数のビジュアル要素に対応しています。

主な要素

• スケール： 開始値／終了値、角度、スイープ方向を設定できる円形スケール
• ポインター： 3 種類（針（従来のゲージ針）、範囲（色付きの弧）、シンボル（マーカーアイコン））
• 範囲： 異なる値の範囲（例：低／中／高）を示すビジュアルゾーン
• ラベル： スケールに沿って表示される数値ラベル
• 目盛り： 値を正確に読み取るための主目盛りと副目盛り
• リム： スケールの周囲にある円形の境界線
• ヘッダー： ゲージのタイトルまたはラベル
• 注釈： ゲージ上に重ねて表示するカスタムビュー、テキスト、画像

一般的な使用例

• スピードメーター - 針ポインターで車両の速度を示す
• KPI ダッシュボード - 範囲ポインターで進捗を示す業務指標
• 温度ゲージ - 色付きゾーンを備えた空調制御ディスプレイ
• 進捗メーター - パーセンテージを表示する完了状況インジケーター
• パフォーマンスインジケーター - システム指標（CPU、メモリ、バッテリー）
• 医療機器 - 健康状態をモニタリングするディスプレイ
• 産業用制御装置 - 機械の稼働状況インジケーター

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

このスキルでは、円形ゲージのすべての機能を、用途別に整理して詳しく説明します。

はじめに

📄 参照： references/getting-started.md

参照する場面： 最初の円形ゲージを設定するとき、パッケージをインストールするとき、基本構造を理解するとき。

説明するトピック：

• Syncfusion.SfGauge.WPF NuGet パッケージのインストール
• アセンブリ参照と名前空間のインポート
• 最初の SfCircularGauge の作成
• 基本的なスケール、ポインター、ヘッダーの追加
• 最小構成で動作する完全な例
• ライセンスの設定

スケールの設定

📄 参照： references/scales-and-configuration.md

参照する場面： 円形スケールの値、角度、間隔、外観を設定するとき。

説明するトピック：

• スケールの範囲に StartValue と EndValue を設定する
• StartAngle と SweepAngle を設定する（部分円または完全な円）
• ラベルの表示頻度に Interval を設定する
• スイープ方向（時計回り／反時計回り）
• 1 つのゲージに複数のスケールを追加する
• SpacingMargin を使ったスケールの半径とサイズ設定
• レスポンシブなサイズ設定のための RadiusFactor

ポインター（値インジケーター）

📄 読む： references/pointers.md

読むタイミング： 値を示すニードル、範囲ポインター、シンボルマーカーを追加するとき。

トピック：

• ニードルポインターの種類（Rectangle、Triangle、Tapered、Arrow）
• ニードルのカスタマイズ（長さ、ストローク、太さ、ノブ、テール）
• 進捗状況を可視化する範囲ポインター
• 範囲ポインターの配置（Inside、Outside、Cross、Custom）
• シンボルポインターの種類（Arrow、Diamond、Ellipse、Triangle、Pentagon など）
• カスタムシンボルテンプレート
• 1 つのスケール上に複数のポインターを配置
• ポインターの値のバインドと更新

範囲（視覚的なゾーン）

📄 読む： references/ranges.md

読むタイミング： 値の範囲（低・中・高など）を示す色付きゾーンを追加するとき。

トピック：

• StartValue と EndValue を使った範囲の作成
• 範囲のストロークと太さのカスタマイズ
• Offset を使った範囲の配置
• ゾーンを可視化する複数の範囲
• カスタム配置のための範囲の開始位置と終了位置のオフセット
• グラデーションの塗りつぶしパターン
• 使用例（温度ゾーン、パフォーマンス帯、危険ゾーン）

ラベルと目盛り

📄 読む： references/labels-and-ticks.md

読むタイミング： スケールのラベル、主目盛り、副目盛りをカスタマイズするとき。

トピック：

• ラベルのストロークとフォントのカスタマイズ
• ラベルの位置（Inside、Outside、Custom）
• ラベルのオフセットと書式設定
• 単位を示すラベルの接頭辞／接尾辞
• MajorTickSettings の設定
• MinorTickSettings と MinorTicksPerInterval
• 目盛りの長さ、ストローク、太さ
• ラベルまたは目盛りを非表示にする

リムと外観

📄 読む： references/rim-and-appearance.md

読むタイミング： ゲージのリム、背景、サイズをスタイル設定し、テーマを適用するとき。

トピック：

• ShowRim プロパティとリムのカスタマイズ
• RimStroke と RimStrokeThickness
• ゲージのサイズ設定（Height、Width、Radius）
• 背景と視覚的なスタイル設定
• SfSkinManager を使ったテーマ設定
• 組み込みテーマ（MaterialLight、FluentDark など）
• カスタムスタイルの設定方法

ヘッダー

📄 読む： references/header.md

読むタイミング： ゲージにタイトルやラベルを追加するとき。

トピック：

• テキストヘッダー用の GaugeHeader プロパティ
• カスタムヘッダービュー
• ヘッダーの配置オプション
• カスタム配置用の GaugeHeaderPosition
• ヘッダーのスタイル設定と書式設定
• ヘッダー内の複数のテキスト要素

注釈

📄 読む： references/annotations.md

読むタイミング： 円形ゲージの上に、カスタムビュー、テキスト、画像、または入れ子になったゲージを重ねるとき。

トピック：

• テキスト注釈の追加
• 画像注釈
• カスタムビュー注釈（入れ子になったゲージ、コントロール）
• Angle プロパティを使った配置
• Offset プロパティ（中心から端までの 0～1）
• ピクセル単位で正確に配置する ViewMargin
• 複数の注釈
• 注釈の動的な更新

高度な機能

📄 読む： references/advanced-features.md

読むタイミング： アニメーション、ポインターのドラッグ、イベント、MVVM パターンを実装するとき。

トピック：

• ポインターのアニメーション（EnableAnimation、AnimationDuration）
• ポインターのドラッグ操作（EnableDragging）
• イベント（ValueChangeStarted、ValueChanging、ValueChanged、ValueChangeCompleted）
• PointerPositionChanged イベント
• データバインディングを使った MVVM パターン
• INotifyPropertyChanged の実装
• ゲージのリアルタイム更新
• パフォーマンスの最適化

クイックスタートの例

ニードルポインター、範囲ゾーン、ヘッダーを備えた速度計ゲージを作成する完全な例を紹介します。

XAML の実装

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    
    <gauge:SfCircularGauge Height="300" Width="300"
                           HeaderAlignment="Custom"
                           GaugeHeaderPosition="0.63,0.75">
        
        
        <gauge:SfCircularGauge.GaugeHeader>
            <TextBlock Text="Speedometer" 
                       FontSize="16" 
                       FontWeight="SemiBold"
                       Foreground="Black"/>
        </gauge:SfCircularGauge.GaugeHeader>
        
        <gauge:SfCircularGauge.Scales>
            <gauge:CircularScale StartValue="0" 
                                 EndValue="160" 
                                 Interval="20"
                                 StartAngle="130"
                                 SweepAngle="280"
                                 ShowRim="True"
                                 RimStroke="LightGray"
                                 RimStrokeThickness="5">
                
                
                <gauge:CircularScale.Ranges>
                    <gauge:CircularRange StartValue="0" EndValue="80" 
                                         Stroke="Green" StrokeThickness="5"/>
                    <gauge:CircularRange StartValue="80" EndValue="120" 
                                         Stroke="Orange" StrokeThickness="5"/>
                    <gauge:CircularRange StartValue="120" EndValue="160" 
                                         Stroke="Red" StrokeThickness="5"/>
                </gauge:CircularScale.Ranges>
                
                
                <gauge:CircularScale.Pointers>
                    <gauge:CircularPointer PointerType="NeedlePointer"
                                           Value="85"
                                           NeedlePointerType="Triangle"
                                           NeedleLengthFactor="0.6"
                                           NeedlePointerStroke="#333"
                                           NeedlePointerStrokeThickness="5"
                                           KnobFill="#333"
                                           KnobStroke="#333"
                                           PointerCapDiameter="15"/>
                </gauge:CircularScale.Pointers>
            </gauge:CircularScale>
        </gauge:SfCircularGauge.Scales>
    </gauge:SfCircularGauge>
    
</Window>

C# のコードビハインド

using Syncfusion.UI.Xaml.Gauges;
using System.Windows;
using System.Windows.Media;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // License registration (in App.xaml.cs OnStartup)
        // Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
    }
}

プログラムによる作成

SfCircularGauge gauge = new SfCircularGauge();
gauge.Height = 300;
gauge.Width = 300;

// Header
TextBlock header = new TextBlock
{
    Text = "Speedometer",
    FontSize = 16,
    FontWeight = FontWeights.SemiBold,
    Foreground = new SolidColorBrush(Colors.Black)
};
gauge.GaugeHeader = header;
gauge.HeaderAlignment = HeaderAlignment.Custom;
gauge.GaugeHeaderPosition = new Point(0.63, 0.75);

// Scale
CircularScale scale = new CircularScale
{
    StartValue = 0,
    EndValue = 160,
    Interval = 20,
    StartAngle = 130,
    SweepAngle = 280,
    ShowRim = true,
    RimStroke = new SolidColorBrush(Colors.LightGray),
    RimStrokeThickness = 5
};

// Ranges
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 0, EndValue = 80, 
    Stroke = new SolidColorBrush(Colors.Green), 
    StrokeThickness = 5 
});
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 80, EndValue = 120, 
    Stroke = new SolidColorBrush(Colors.Orange), 
    StrokeThickness = 5 
});
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 120, EndValue = 160, 
    Stroke = new SolidColorBrush(Colors.Red), 
    StrokeThickness = 5 
});

// Needle Pointer
CircularPointer pointer = new CircularPointer
{
    PointerType = PointerType.NeedlePointer,
    Value = 85,
    NeedlePointerType = NeedlePointerType.Triangle,
    NeedleLengthFactor = 0.6,
    NeedlePointerStroke = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    NeedlePointerStrokeThickness = 5,
    KnobFill = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    KnobStroke = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    PointerCapDiameter = 15
};
scale.Pointers.Add(pointer);

gauge.Scales.Add(scale);
this.Content = gauge;

一般的なパターン

パターン 1：範囲ポインターを使った進捗ゲージ

進捗や完了状況を可視化するには、範囲ポインターを使用します。

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale StartValue="0" EndValue="100" 
                             SweepAngle="360"
                             RimStroke="LightGray" 
                             RimStrokeThickness="20">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer PointerType="RangePointer"
                                       Value="75"
                                       RangePointerStroke="DeepSkyBlue"
                                       RangePointerStrokeThickness="20"
                                       RangeCap="Both"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

パターン 2：色付きゾーンを備えた温度計ゲージ

複数の範囲を使って温度を表示します。

<gauge:CircularScale StartValue="-30" EndValue="50">
    <gauge:CircularScale.Ranges>
        <gauge:CircularRange StartValue="-30" EndValue="0" 
                             Stroke="Blue" StrokeThickness="10"/>
        <gauge:CircularRange StartValue="0" EndValue="25" 
                             Stroke="Green" StrokeThickness="10"/>
        <gauge:CircularRange StartValue="25" EndValue="50" 
                             Stroke="Red" StrokeThickness="10"/>
    </gauge:CircularScale.Ranges>
    <gauge:CircularScale.Pointers>
        <gauge:CircularPointer PointerType="NeedlePointer" Value="22"/>
    </gauge:CircularScale.Pointers>
</gauge:CircularScale>

パターン 3：インタラクティブなドラッグ可能ポインター

ポインターのドラッグによるユーザー操作を有効にします。

<gauge:CircularPointer PointerType="SymbolPointer"
                       Symbol="InvertedTriangle"
                       EnableDragging="True"
                       EnableAnimation="False"
                       Value="50"
                       ValueChanged="Pointer_ValueChanged"/>

private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // Update UI or data model with new value
    CurrentValue = e.Value;
}

パターン 4：マルチスケールゲージ

1 つのゲージに複数の指標を表示します。

<gauge:SfCircularGauge SpacingMargin="0.7">
    <gauge:SfCircularGauge.Scales>
        
        <gauge:CircularScale Radius="180">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer Value="60"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
        
        
        <gauge:CircularScale Radius="100">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer Value="80"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

パターン 5：MVVM データバインディング

ポインターの値を ViewModel のプロパティにバインドします。

<gauge:CircularPointer Value="{Binding CurrentSpeed, Mode=TwoWay}"/>

public class GaugeViewModel : INotifyPropertyChanged
{
    private double _currentSpeed;
    public double CurrentSpeed
    {
        get => _currentSpeed;
        set
        {
            _currentSpeed = value;
            OnPropertyChanged(nameof(CurrentSpeed));
        }
    }
    
    // INotifyPropertyChanged implementation
}

主なプロパティの概要

SfCircularGauge

プロパティ	型	説明
Scales	ObservableCollection	ゲージ内のスケールのコレクション
GaugeHeader	object	ゲージのヘッダーコンテンツ
HeaderAlignment	HeaderAlignment	ヘッダーの位置（Top、Bottom、Custom）
GaugeHeaderPosition	Point	カスタムヘッダーの位置（0-1、0-1）
Annotations	CircularGaugeAnnotationCollection	カスタム注釈のオーバーレイ
SpacingMargin	double	複数のスケール間の間隔（0.1-1）

CircularScale

プロパティ	型	説明
StartValue	double	スケールの最小値
EndValue	double	スケールの最大値
Interval	double	ラベル間の間隔
StartAngle	double	開始角度（0-360）
SweepAngle	double	スイープ角度（0-360）
SweepDirection	SweepDirection	時計回りまたは反時計回り
Radius	double	スケールの半径
RadiusFactor	double	半径の係数（0-1）
ShowRim	bool	リムの表示／非表示
RimStroke	Brush	リムの色
RimStrokeThickness	double	リムの太さ
Pointers	ObservableCollection	ポインターのコレクション
Ranges	ObservableCollection	範囲のコレクション

CircularPointer

プロパティ	型	説明
PointerType	PointerType	NeedlePointer、RangePointer、SymbolPointer
Value	double	現在のポインター値
EnableAnimation	bool	スムーズなアニメーションを有効にします
AnimationDuration	int	アニメーションの長さ（ms）
EnableDragging	bool	インタラクティブなドラッグを有効にします
NeedlePointerType	NeedlePointerType	Rectangle、Triangle、Tapered、Arrow
NeedleLengthFactor	double	針の長さ（0-1）
Symbol	Symbol	SymbolPointer のシンボルの種類
RangeCap	RangeCap	範囲の端のスタイル（Start、End、Both、None）

CircularRange

プロパティ	型	説明
StartValue	double	範囲の開始値
EndValue	double	範囲の終了値
Stroke	Brush	範囲の色
StrokeThickness	double	範囲の太さ
Offset	double	位置のオフセット（0-1）

一般的なユースケース

ビジネスダッシュボード

売上、パフォーマンス、顧客満足度などの指標を表示する複数のゲージと、目標を示す色分けされたゾーンを備えた KPI ダッシュボードを作成します。

産業モニタリング

圧力、温度、RPM、電圧を表示するゲージと、リアルタイム更新およびアラームゾーンを備えた制御パネルを構築します。

車両計器

リアルな針の動きと警告ゾーンを備えた速度計、タコメーター、燃料計、温度計を実装します。

健康・フィットネス

進捗状況の可視化と目標ゾーンを備えた心拍数モニター、歩数カウンター、カロリートラッカーを表示します。

システムモニタリング

CPU 使用率、メモリ使用率、ディスク容量、ネットワーク帯域幅を示すインジケーターを、リアルタイム更新とともに作成します。

API リファレンス

• SfCircularGauge API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html
• CircularScale API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html
• CircularPointer API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html
• CircularRange API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html
• ドキュメント全文： https://help.syncfusion.com/wpf/radial-gauge/overview

---

次のステップ： ご自身のニーズに合わせて、上記のリファレンスファイルをご確認ください。まず「はじめに」でセットアップを行い、その後、必要に応じて個別の機能について詳しくご覧ください。