syncfusion-winforms-bullet-graph

Syncfusion Windows Forms Bullet Graph の実装

Windows Forms アプリケーションで Syncfusion Bullet Graph コントロールを実装するための専門的なガイダンスです。Bullet Graph は、ダッシュボード向けに設計されたコンパクトで省スペースなデータ可視化コントロールで、従来のゲージやメーターに代わるものです。定性的なパフォーマンス範囲内で、主要な測定値（注目測定値）と目標値（比較測定値）を表示します。

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

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

• ダッシュボードのコンパクトなレイアウトで KPI（重要業績評価指標）を表示する
• 目標に対する現在のパフォーマンス（実績と目標）を示す
• パフォーマンス範囲（低い、満足できる、良好）を使ってデータを可視化する
• 売上分析や経費追跡の可視化を作成する
• 従来のゲージやメーターを省スペースな代替手段に置き換える
• 実績値をベンチマークや目標値と比較する
• 高い情報密度が求められる経営層向けダッシュボードを構築する
• 年初来（YTD）指標の可視化を実装する

コンポーネントの概要

Bullet Graph は次の要素で構成されます。

• 注目測定値：現在の値（例：実際の売上）を示す主要なデータバー
• 比較測定値：目標やベンチマーク（例：目標売上）を示すターゲットライン
• 定性的範囲：パフォーマンスレベル（例：低い、満足できる、良好）を示す背景帯
• 定量的スケール：数値を示す目盛りとラベルを備えた軸
• キャプション：グラフの内容を説明するラベル

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

はじめに

📄 参照： references/getting-started.md

• アセンブリの配置と NuGet パッケージのインストール
• コードで Bullet Graph をプログラムから作成する方法
• Visual Studio との統合に Syncfusion Reference Manager を使用する方法
• 基本的な初期化と最初の動作例
• 必要な名前空間とアセンブリ

測定値（注目測定値と比較測定値）

📄 参照： references/measures.md

• 注目測定値：主要なデータバーの設定
• 注目測定値のカスタマイズ（色、太さ）
• 比較測定値：ターゲットラインの設定
• 比較測定値のカスタマイズ（記号の色、太さ）
• 視覚的な階層と配置

定性的範囲

📄 参照： references/qualitative-ranges.md

• 定性的範囲コレクションの追加と設定
• 範囲のプロパティ（RangeEnd、RangeStroke、RangeCaption）
• 範囲のサイズと不透明度のカスタマイズ
• 範囲の色を目盛りとラベルにバインドする方法
• パフォーマンス指標のパターン（良好、満足できる、低い）

スケールの目盛り

📄 参照： references/scale-and-ticks.md

• 主目盛りと副目盛りの設定
• 目盛りのカスタマイズ（線、サイズ、太さ）
• 目盛りの配置（Above、Below、Cross）
• Interval と MinorTicksPerInterval の設定
• 視覚的なカスタマイズ例

スケールラベル

📄 参照： references/scale-labels.md

• ラベルのプロパティと数値
• ラベルのカスタマイズ（フォントサイズ、色、オフセット）
• ラベルの書式設定パターン（LabelFormat）
• ラベルの配置（Above、Below）

レイアウトと向き

📄 参照： references/layout-and-orientation.md

• 向き（Horizontal、Vertical）
• フロー方向（Forward、Backward）
• キャプションとキャプションの配置（Near、Far）
• 定量的スケールの長さのカスタマイズ
• レイアウトのプロパティとドッキング

クイックスタートの例

using System;
using System.Drawing;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.BulletGraph;

namespace BulletGraphDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Create Bullet Graph
            BulletGraph bullet = new BulletGraph();
            bullet.Dock = DockStyle.Fill;
            
            // Set orientation and flow
            bullet.FlowDirection = BulletGraphFlowDirection.Forward;
            bullet.Orientation = Orientation.Horizontal;
            
            // Configure measures
            bullet.FeaturedMeasure = 4.5;      // Actual value
            bullet.ComparativeMeasure = 7;     // Target value
            
            // Configure scale
            bullet.Minimum = 0;
            bullet.Maximum = 10;
            bullet.Interval = 2;
            bullet.MinorTicksPerInterval = 3;
            
            // Add qualitative ranges
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 4, 
                RangeCaption = "Bad", 
                RangeStroke = Color.Red 
            });
            
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 7, 
                RangeCaption = "Satisfactory", 
                RangeStroke = Color.Yellow 
            });
            
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 10, 
                RangeCaption = "Good", 
                RangeStroke = Color.Green 
            });
            
            // Add caption
            bullet.Caption = "Revenue YTD\n$ in thousands";
            
            // Add to form
            this.Controls.Add(bullet);
        }
    }
}

一般的なパターン

売上追跡ダッシュボード

BulletGraph revenueGraph = new BulletGraph();
revenueGraph.Dock = DockStyle.Top;
revenueGraph.Height = 100;
revenueGraph.Caption = "Revenue YTD\n$ in thousands";
revenueGraph.CaptionPosition = BulletGraphCaptionPosition.Near;

// Set actual vs target
revenueGraph.FeaturedMeasure = 275;     // Actual: $275k
revenueGraph.ComparativeMeasure = 300;  // Target: $300k

// Configure scale
revenueGraph.Minimum = 0;
revenueGraph.Maximum = 400;
revenueGraph.Interval = 100;
revenueGraph.LabelFormat = "$#0K";

// Performance ranges
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 200, RangeStroke = Color.FromArgb(255, 200, 200) });  // Poor
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 300, RangeStroke = Color.FromArgb(255, 255, 200) });  // Fair
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 400, RangeStroke = Color.FromArgb(200, 255, 200) });  // Good

縦型 KPI 表示

BulletGraph kpiGraph = new BulletGraph();
kpiGraph.Orientation = Orientation.Vertical;
kpiGraph.FlowDirection = BulletGraphFlowDirection.Backward;
kpiGraph.Dock = DockStyle.Left;
kpiGraph.Width = 150;

kpiGraph.Caption = "Customer\nSatisfaction";
kpiGraph.CaptionPosition = BulletGraphCaptionPosition.Far;

kpiGraph.FeaturedMeasure = 8.5;   // Current score
kpiGraph.ComparativeMeasure = 9;  // Target score

kpiGraph.Minimum = 0;
kpiGraph.Maximum = 10;
kpiGraph.Interval = 2;

カスタムカラーを適用したスタイル付き Bullet Graph

BulletGraph styledGraph = new BulletGraph();

// Customize featured measure bar
styledGraph.FeaturedMeasure = 65;
styledGraph.FeaturedMeasureBarStroke = Color.DarkBlue;
styledGraph.FeaturedMeasureBarStrokeThickness = 8;

// Customize comparative measure
styledGraph.ComparativeMeasure = 80;
styledGraph.ComparativeMeasureSymbolStroke = Color.Red;
styledGraph.ComparativeMeasureSymbolStrokeThickness = 3;

// Customize ticks and labels
styledGraph.MajorTickStroke = Color.Black;
styledGraph.MajorTickSize = 15;
styledGraph.MinorTickStroke = Color.Gray;
styledGraph.MinorTickSize = 10;
styledGraph.LabelFontSize = 12;
styledGraph.LabelStroke = Color.Black;

ダッシュボード内の複数の Bullet Graph

// Stack multiple bullet graphs vertically
BulletGraph[] metrics = new BulletGraph[3];
string[] captions = { "Sales\n$ in thousands", "Profit\n$ in thousands", "Customers\ncount" };
double[] actuals = { 275, 45, 1250 };
double[] targets = { 300, 50, 1500 };

for (int i = 0; i < 3; i++)
{
    metrics[i] = new BulletGraph();
    metrics[i].Dock = DockStyle.Top;
    metrics[i].Height = 80;
    metrics[i].Caption = captions[i];
    metrics[i].FeaturedMeasure = actuals[i];
    metrics[i].ComparativeMeasure = targets[i];
    
    // Add standard ranges
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 0.6, RangeStroke = Color.LightCoral });
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 0.9, RangeStroke = Color.LightYellow });
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 1.2, RangeStroke = Color.LightGreen });
    
    this.Controls.Add(metrics[i]);
}

主要なプロパティのリファレンス

測定値

プロパティ	型	説明
FeaturedMeasure	double	表示する主要な値（現在値／実績値）
FeaturedMeasureBarStroke	Color	主要な測定値バーの色
FeaturedMeasureBarStrokeThickness	int	主要な測定値バーの太さ
ComparativeMeasure	double	目標値またはベンチマーク値
ComparativeMeasureSymbolStroke	Color	比較測定値ラインの色
ComparativeMeasureSymbolStrokeThickness	int	比較測定値ラインの太さ

尺度

プロパティ	型	説明
Minimum	double	尺度の開始値
Maximum	double	尺度の終了値
Interval	double	目盛り間の間隔
MinorTicksPerInterval	int	目盛り間の小目盛り数

レイアウト

プロパティ	型	説明
Orientation	Orientation	水平または垂直の表示
FlowDirection	BulletGraphFlowDirection	順方向または逆方向の流れ
Caption	string	指標を説明するラベル
CaptionPosition	BulletGraphCaptionPosition	キャプションの近端または遠端への配置

範囲

プロパティ	型	説明
QualitativeRanges	QualitativeRangeCollection	定性的な範囲オブジェクトのコレクション
QualitativeRangesSize	int	範囲帯の幅／高さ

一般的なユースケース

1. 経営ダッシュボード：限られたスペースに複数の KPI を表示します
2. 財務レポート：売上、利益、経費を追跡します
3. 営業実績：ノルマ達成状況を可視化します
4. 顧客指標：満足度スコア、顧客維持率を表示します
5. 業務 KPI：効率性、処理能力、品質指標を表示します
6. プロジェクト管理：予算と実績、スケジュールの進捗状況を比較します
7. 製造：生産目標、不良率、稼働率を表示します