syncfusion-winforms-radial-gauge

ゲージの実装

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

Windows Forms アプリケーションに Syncfusion のゲージコントロールを実装する必要がある場合に、このスキルを使用します。このスキルでは、さまざまな可視化ニーズに対応する3種類のゲージについて説明します。

RadialGauge の使用例

1. スピードメーターとタコメーター - 車両の計器、RPM 表示
2. 温度ゲージ - HVAC 制御、システム監視、天気表示
3. 圧力ゲージ - 産業用監視、タイヤ空気圧、油圧システム
4. 進捗インジケーター - 読み込みや完了率を示す円形の進捗表示
5. KPI ダッシュボード - 範囲を色分けしたパフォーマンス指標
6. ダイヤルコントロール - 音量、明るさなど、回転式コントロールの可視化
7. コンパス表示 - ナビゲーション、方向インジケーター
8. 時計の文字盤 - スタイルをカスタマイズできるアナログ時刻表示

LinearGauge の使用例

1. プログレスバー - タスクの完了状況、ダウンロードの進捗、読み込み状況
2. レベルインジケーター - バッテリー残量、燃料ゲージ、音量メーター
3. スライダーの可視化 - 温度スライダー、調整コントロール
4. 横型メーター - オーディオレベル、信号強度、容量インジケーター
5. 縦型メーター - 建物の高さインジケーター、エレベーターの位置
6. 温度計表示 - 温度目盛り、医療用温度計
7. タイムラインインジケーター - プロジェクトのタイムライン、マイルストーンの追跡

DigitalGauge の使用例

1. デジタル時計 - 時刻表示、カウントダウンタイマー、ストップウォッチ
2. カウンター - 来訪者数カウンター、生産数カウンター、スコア表示
3. 英数字のステータス表示 - システムコード、製品 ID、ステータスメッセージ
4. LED 表示 - レトロスタイルのインジケーター、産業用ディスプレイ
5. 価格表示 - ガソリンスタンドの価格、小売価格
6. 測定値の読み取り表示 - デジタルマルチメーター、センサーの測定値

使用しない場面： ゲージによる可視化を必要としない単純なテキスト表示には、標準の Label または TextBox コントロールを使用してください。チャートやグラフには、Chart コントロールを使用してください。

コンポーネントの概要

Syncfusion は、Windows Forms でデータを可視化するための3種類のゲージコントロールを提供しています。

1. RadialGauge

カスタマイズ可能な針、範囲、フレームを使用して、値を円形または円弧の目盛りに表示します。

主な機能：

• 4種類のフレーム：FullCircle、HalfCircle、QuarterCircle、Fill
• 複数の針に対応
• しきい値を視覚化する範囲の色分け
• 目盛り、目盛り線、ラベルをカスタマイズ可能
• グラデーション背景とスタイル設定
• 針のスタイルをカスタマイズ可能（Default、Advanced、Pointer）

2. LinearGauge

ポインターインジケーターを使用して、値を直線の目盛り（水平または垂直）に表示します。

主な機能：

• 水平および垂直の向き
• ポインターの配置（Top、Center、Bottom）
• 範囲の色分け
• 主目盛りと補助目盛り
• 値を示すインジケーターバー
• グラデーションのスタイル設定

3. DigitalGauge

英数字を LED／デジタル形式で表示します。

主な機能：

• 4種類の文字タイプ：DotMatrix、SevenSegment、FourteenSegment、SixteenSegment
• 文字数を設定可能
• セグメント間隔を調整可能
• セグメントを非表示にするオプション
• 角丸に対応

すべてのゲージで利用できる機能：

• ビジュアルテーマ（組み込みテーマ9種類とカスタムテーマ）
• リアルタイム更新のためのデータバインディング
• 表示を完全に制御できるカスタムレンダラー
• プロフェッショナルなスタイル設定オプション

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

インストールとセットアップ

📄 参照： references/installation-and-setup.md

ゲージコントロールを初めてセットアップする場合に参照します。以下について説明します。

• アセンブリ参照（Syncfusion.Gauge.Windows.dll、Syncfusion.Shared.Base.dll）
• NuGet パッケージのインストール
• 名前空間のインポート（Syncfusion.Windows.Forms.Gauge）
• フレームワークのサポート（.NET 4.5+、.NET 6.0-8.0）
• デプロイ要件
• ツールボックスの設定
• サンプルブラウザーの場所

RadialGauge（円形ゲージ）

📄 参照： references/radial-gauge.md

ユーザーが円形、円弧、またはダイヤル形式のゲージを必要としている場合に使用します。以下を扱います。

• フレームの種類（FullCircle、HalfCircle、QuarterCircle、Fill）
• デザイナーおよびコードによる設定
• スケールとラベル（配置、向き、色）
• 目盛り（主目盛り／副目盛りの設定、高さ、色）
• 針（単針および複数の針、スタイル、色）
• 範囲（開始値／終了値を指定した色分けされた値の範囲）
• スケールの分割（MajorDifference、MinorDifference）
• StartAngle と SweepAngle のカスタマイズ
• フレームの外観（グラデーション、円弧の色）
• DrawLabel イベントによるラベルのカスタマイズ
• パフォーマンス最適化のヒント

LinearGauge（バー／スライダーゲージ）

📄 参照： references/linear-gauge.md

ユーザーが水平または垂直のバー形式のゲージを必要としている場合に使用します。以下を扱います。

• フレームの種類（Horizontal、Vertical）
• デザイナーおよびコードによる設定
• スケールとラベルの設定
• 目盛り（主目盛り／副目盛り）
• ポインターの配置オプション
• 針の表示とスタイル設定
• 範囲（色を指定した LinearRange）
• 値インジケーターの配置
• フレームの外観のカスタマイズ
• 各向きの完全な例

DigitalGauge（LED ディスプレイ）

📄 参照： references/digital-gauge.md

ユーザーが LED 形式の英数字ディスプレイを必要としている場合に使用します。以下を扱います。

• 文字の種類（DotMatrix、SevenSegment、FourteenSegment、SixteenSegment）
• デザイナーおよびコードによる設定
• 文字数の制限
• セグメント間隔の設定
• ShowInvisibleSegments プロパティ
• 角を丸めるための RoundCornerRadius
• 文字列表示用の Value プロパティ
• フレームのカスタマイズ
• 各文字種の例

ビジュアルテーマとスタイル設定

📄 参照： references/visual-themes.md

ユーザーがプロフェッショナルなテーマやカスタムスタイルを適用したい場合に使用します。以下を扱います。

• VisualStyle プロパティ（3 種類すべてのゲージに適用）
• 組み込みテーマ（Blue、Black、Silver、Metro、Office2016 の各バリエーション）
• カスタムテーマの作成（ThemeBrush コレクション）
• 色をカスタマイズするプロパティ
• デザイン時のテーマ設定
• 各ゲージタイプに固有のテーマの例
• アプリケーション全体への一貫したテーマ適用

カスタムレンダラー

📄 参照： references/custom-renderers.md

ユーザーがゲージの描画と外観を完全に制御したい場合に使用します。以下を扱います。

• IRadialGaugeRenderer インターフェイス
• ILinearGaugeRenderer インターフェイス
• カスタムレンダラークラスの作成
• DrawOuterArc、DrawNeedle、DrawLabel、DrawRanges メソッド
• Renderer プロパティの割り当て
• 高度なカスタマイズのシナリオ
• カスタムレンダラーの完全な例

データバインディング

📄 参照： references/data-binding.md

ユーザーがリアルタイムのデータ更新やデータベース駆動のゲージを必要としている場合に使用します。以下を扱います。

• DataSource プロパティの設定
• DisplayMember（列のマッピング）
• DisplayRecordIndex（行のマッピング）
• 高頻度のデータ更新
• リアルタイム監視のシナリオ
• パフォーマンスに関する考慮事項
• すべてのゲージタイプを対象としたバインディングの完全な例

クイックスタートの例

RadialGauge：スピードメーター

using Syncfusion.Windows.Forms.Gauge;

// Create RadialGauge
RadialGauge speedometer = new RadialGauge();
speedometer.Size = new Size(300, 300);
speedometer.Location = new Point(20, 20);

// Configure gauge properties
speedometer.MinimumValue = 0;
speedometer.MaximumValue = 200;
speedometer.MajorDifference = 20;
speedometer.MinorDifference = 5;
speedometer.Value = 60;

// Set frame type
speedometer.FrameType = FrameType.HalfCircle;

// Configure appearance
speedometer.ShowNeedle = true;
speedometer.NeedleStyle = NeedleStyle.Advanced;
speedometer.GaugeLabel = "Speed (MPH)";

// Add color-coded ranges
Range range1 = new Range();
range1.StartValue = 0;
range1.EndValue = 80;
range1.Color = Color.Green;
range1.Height = 10;
speedometer.Ranges.Add(range1);

Range range2 = new Range();
range2.StartValue = 80;
range2.EndValue = 150;
range2.Color = Color.Yellow;
range2.Height = 10;
speedometer.Ranges.Add(range2);

Range range3 = new Range();
range3.StartValue = 150;
range3.EndValue = 200;
range3.Color = Color.Red;
range3.Height = 10;
speedometer.Ranges.Add(range3);

// Add to form
this.Controls.Add(speedometer);

LinearGauge：バッテリーレベル

using Syncfusion.Windows.Forms.Gauge;

// Create LinearGauge
LinearGauge batteryLevel = new LinearGauge();
batteryLevel.Size = new Size(300, 125);
batteryLevel.Location = new Point(20, 20);

// Set horizontal orientation
batteryLevel.LinearFrameType = LinearFrameType.Horizontal;

// Configure gauge properties
batteryLevel.MinimumValue = 0;
batteryLevel.MaximumValue = 100;
batteryLevel.MajorDifference = 20;
batteryLevel.MinorTickCount = 3;
batteryLevel.Value = 75;

// Configure appearance
batteryLevel.ShowNeedle = true;
batteryLevel.PointerPlacement = Placement.Center;

// Add color-coded ranges
LinearRange lowRange = new LinearRange();
lowRange.StartValue = 0;
lowRange.EndValue = 20;
lowRange.Color = Color.Red;
lowRange.Height = 8;
batteryLevel.Ranges.Add(lowRange);

LinearRange normalRange = new LinearRange();
normalRange.StartValue = 20;
normalRange.EndValue = 80;
normalRange.Color = Color.Yellow;
normalRange.Height = 8;
batteryLevel.Ranges.Add(normalRange);

LinearRange highRange = new LinearRange();
highRange.StartValue = 80;
highRange.EndValue = 100;
highRange.Color = Color.Green;
highRange.Height = 8;
batteryLevel.Ranges.Add(highRange);

// Add to form
this.Controls.Add(batteryLevel);

DigitalGauge：LED 時計

using Syncfusion.Windows.Forms.Gauge;

// Create DigitalGauge
DigitalGauge digitalClock = new DigitalGauge();
digitalClock.Size = new Size(250, 100);
digitalClock.Location = new Point(20, 20);

// Configure character display
digitalClock.CharacterType = CharacterType.SevenSegment;
digitalClock.CharacterCount = 8;
digitalClock.SegmentSpacing = 2.0f;

// Set initial value
digitalClock.Value = DateTime.Now.ToString("HH:mm:ss");

// Configure appearance
digitalClock.ForeColor = Color.Red;
digitalClock.ShowInvisibleSegments = true;

// Add timer to update clock
Timer clockTimer = new Timer();
clockTimer.Interval = 1000; // 1 second
clockTimer.Tick += (s, e) => {
    digitalClock.Value = DateTime.Now.ToString("HH:mm:ss");
};
clockTimer.Start();

// Add to form
this.Controls.Add(digitalClock);

一般的なパターン

パターン 1：複数のゲージを使用したダッシュボード

// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;

// Temperature gauge (RadialGauge)
RadialGauge tempGauge = new RadialGauge();
tempGauge.MinimumValue = -20;
tempGauge.MaximumValue = 120;
tempGauge.Value = 72;
tempGauge.GaugeLabel = "°F";
tempGauge.FrameType = FrameType.HalfCircle;
dashboard.Controls.Add(tempGauge);

// Fuel level (LinearGauge)
LinearGauge fuelGauge = new LinearGauge();
fuelGauge.LinearFrameType = LinearFrameType.Vertical;
fuelGauge.MinimumValue = 0;
fuelGauge.MaximumValue = 100;
fuelGauge.Value = 45;
dashboard.Controls.Add(fuelGauge);

// Status counter (DigitalGauge)
DigitalGauge statusCounter = new DigitalGauge();
statusCounter.CharacterType = CharacterType.SevenSegment;
statusCounter.Value = "1234";
dashboard.Controls.Add(statusCounter);

this.Controls.Add(dashboard);

パターン 2：データバインドされたリアルタイムゲージ

// Setup data source
DataTable sensorData = new DataTable();
sensorData.Columns.Add("SensorValue", typeof(float));
sensorData.Rows.Add(0);

// Create and bind gauge
RadialGauge sensorGauge = new RadialGauge();
sensorGauge.DataSource = sensorData;
sensorGauge.DisplayMember = "SensorValue";
sensorGauge.DisplayRecordIndex = 0;

// Timer to simulate sensor updates
Timer dataTimer = new Timer();
dataTimer.Interval = 100; // 10 updates per second
dataTimer.Tick += (s, e) => {
    // Update data source (gauge updates automatically)
    sensorData.Rows[0]["SensorValue"] = GetSensorReading();
};
dataTimer.Start();

パターン 3：テーマを適用したゲージセット

// Apply consistent theme to all gauges
void ApplyTheme(Control.ControlCollection controls, ThemeStyle theme)
{
    foreach (Control control in controls)
    {
        if (control is RadialGauge radial)
            radial.VisualStyle = theme;
        else if (control is LinearGauge linear)
            linear.VisualStyle = theme;
        else if (control is DigitalGauge digital)
            digital.VisualStyle = theme;
            
        if (control.HasChildren)
            ApplyTheme(control.Controls, theme);
    }
}

// Usage
ApplyTheme(this.Controls, ThemeStyle.Office2016Colorful);

ゲージの種類の選択ガイド

必要な表示	使用するゲージ	理由
円形表示（スピードメーター形式）	RadialGauge	回転値に適しており、針の動きが直感的です
円弧／部分円	RadialGauge（HalfCircle/QuarterCircle）	省スペースで、モダンなダッシュボードの外観です
水平プログレスバー	LinearGauge（Horizontal）	左から右への進行がわかりやすいです
垂直レベルインジケーター	LinearGauge（Vertical）	高さ／深さ／レベルの可視化に適しています
時刻表示（LED 形式）	DigitalGauge（SevenSegment）	クラシックなデジタル時計の外観です
英数字のステータスコード	DigitalGauge（FourteenSegment/SixteenSegment）	文字と数字に対応しています
1 つのダイヤル上に複数の針を表示	RadialGauge（EnableCustomNeedles）	同じ目盛り上で複数の値を比較できます
塗りつぶし式の進捗インジケーター	RadialGauge（FrameType.Fill）	開始位置から現在値までを視覚的に塗りつぶします

主なプロパティの比較

すべてのゲージに共通

プロパティ	型	説明
Value	float (Radial/Linear) / string (Digital)	現在表示されている値
MinimumValue	float	目盛りの最小値（Radial/Linear のみ）
MaximumValue	float	目盛りの最大値（Radial/Linear のみ）
DataSource	object	バインドするデータソース
DisplayMember	string	値のバインドに使用する列名
DisplayRecordIndex	int	値のバインドに使用する行インデックス

RadialGauge 固有

プロパティ	型	説明
FrameType	FrameType	FullCircle、HalfCircle、QuarterCircle、Fill
StartAngle	int	円弧の開始角度（度）
SweepAngle	int	円弧の範囲（度）
ShowNeedle	bool	指針を表示します
VisualStyle	ThemeStyle	テーマ：Blue、Black、Silver、Metro、Office2016*、Custom
NeedleStyle	NeedleStyle	Default、Advanced、Pointer
EnableCustomNeedles	bool	複数の針を使用できるようにします
Ranges	RangeCollection	値の範囲を色分けします
MajorDifference	float	主目盛りの間隔
MinorDifference	float	副目盛りの間隔

LinearGauge 固有

プロパティ	型	説明
LinearFrameType	LinearFrameType	水平または垂直
PointerPlacement	Placement	上、中央、下
ShowNeedle	bool	指針を表示します
VisualStyle	ThemeStyle	テーマ：Blue、Black、Silver、Metro、Office2016*、Custom
Ranges	LinearRangeCollection	値の範囲を色分けします
MajorDifference	float	主目盛りの間隔
MinorTickCount	int	主目盛りの間にある副目盛りの数

DigitalGauge 固有

プロパティ	型	説明
Value	string	表示するテキスト
CharacterType	CharacterType	DotMatrix、SevenSegment、FourteenSegment、SixteenSegment
CharacterCount	int	表示する文字数
SegmentSpacing	float	文字間の間隔
ShowInvisibleSegments	bool	非アクティブなセグメントを表示します
RoundCornerRadius	int	角の丸みの半径
注： DigitalGauge は VisualStyle プロパティをサポートしていません。代わりに ForeColor と BackColor を使用してスタイルを設定してください。

一般的なユースケース

1. 産業用ダッシュボード

シナリオ： 複数のセンサー（圧力、温度、RPM）を監視する
解決策： 色分けされた範囲とリアルタイムのデータバインディングを使用した複数の RadialGauge

2. 進捗インジケーター

シナリオ： タスクの完了率を表示する
解決策： 0～100 の範囲を設定した LinearGauge（Horizontal）または RadialGauge（Fill タイプ）

3. デジタル時計表示

シナリオ： 現在時刻を LED 形式で表示する
解決策： SevenSegment の文字タイプを使用した DigitalGauge と、更新用のタイマー

4. 車両のインストルメントクラスター

シナリオ： スピードメーター、タコメーター、燃料計
ソリューション： RadialGauges（速度／RPM には HalfCircle）、LinearGauge（燃料には Vertical）

5. システムモニター

シナリオ： CPU 使用率、メモリ、ネットワーク速度
ソリューション： RadialGauges（割合を示すダイヤル）と DigitalGauges（数値表示）の組み合わせ

6. 温度制御

シナリオ： 温度を視覚的に表示するサーモスタット
ソリューション： 色範囲を設定した RadialGauge（FullCircle）（青＝低温、黄＝適温、赤＝高温）

ベストプラクティス

1. 適切なゲージの種類を選択する - 回転値には RadialGauge、線形の値の変化には LinearGauge、英数字には DigitalGauge を使用します
2. 色分けした範囲を使用する - 視覚的なしきい値によって読みやすさが向上します（緑＝良好、黄＝警告、赤＝危険）
3. 適切なスケールを設定する - Min/Max と MajorDifference をデータ範囲に合わせて設定します
4. テーマに一貫性を持たせる - アプリケーション内のすべてのゲージで同じ VisualStyle を使用します
5. リアルタイム更新を最適化する - Value を手動で設定するのではなく、頻繁に更新する場合はデータバインディングを使用します
6. ゲージにラベルを付ける - GaugeLabel プロパティを設定して、測定対象を明確にします
7. パフォーマンスを考慮する - 多数のゲージがある場合、複数のプロパティを設定する際に SuspendLayout/ResumeLayout を使用します
8. さまざまなフレームの種類を試す - HalfCircle と QuarterCircle は、読みやすさを保ちながら省スペース化できます