syncfusion-wpf-bullet-graph

WPF でのブレットグラフの実装

Syncfusion® WPF ブレットグラフ（SfBulletGraph）コンポーネントを実装するためのガイドです。ブレットグラフは、定性的な範囲内で主要な測定値（現在値）と目標値を比較してパフォーマンスレベルを示す、コンパクトな線形ビジュアライゼーションです。

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

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

• パフォーマンス指標の表示： 現在値と目標値を比較します
• KPI ダッシュボードの作成： 省スペースなビジュアライゼーションを使用します
• 目標達成状況の表示： 視覚的なパフォーマンス指標を使用します
• 従来のゲージの置き換え： よりコンパクトなブレットグラフ表示を使用します
• 文脈に沿ったデータのビジュアライゼーション： 定性的な範囲の背景を使用します
• 売上分析や経費追跡のビジュアライゼーションの実装
• 画面スペースが限られたダッシュボード環境の構築
• 実績値と目標値の比較： 1 つのコンパクトなビジュアライゼーションで比較します

コンポーネントの概要

SfBulletGraph は、ダッシュボードのゲージやメーターに代わるものとして設計された棒グラフの一種です。次の機能があります。

• 主要な測定値： 目立つ棒として表示される主要なデータ値（例：当年の累計売上）
• 比較測定値： 垂直線マーカーとして表示される目標値または基準値
• 定性的な範囲： 状況（例：不良、標準、良好）を示す背景色の帯
• 定量スケール： 主目盛り／補助目盛りとラベルを設定できる軸
• キャプションのサポート： ブレットグラフの内容を示す説明ラベル
• 向きのオプション： 水平または垂直のレイアウト
• コンパクトなデザイン： 最小限のスペースで多くのデータを表示

一般的な使用例：

• 売上と目標の追跡
• 予算に対する経費分析
• ダッシュボード上のパフォーマンス指標
• KPI のビジュアライゼーション
• 目標達成状況の指標

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

はじめに

📄 参照： references/getting-started.md

• NuGet または Syncfusion Reference Manager によるインストール
• アセンブリ参照（Syncfusion.SfBulletGraph.WPF）
• 名前空間の宣言
• XAML と C# での基本的なブレットグラフの作成
• テーマのサポートとカスタマイズ
• 最初に動作するサンプル

定量スケールの設定

📄 参照： references/quantitative-scale.md

• スケール範囲の設定（Minimum、Maximum、Interval）
• 主目盛りの設定（サイズ、ストローク、色）
• 補助目盛りの設定（間隔ごとの数、サイズ、ストローク）
• ラベルのカスタマイズと書式設定
• スケールの長さの調整
• 目盛りとラベルの表示オプション

パフォーマンスの測定値

📄 参照： references/measures.md

• 主要な測定値の実装（主要なデータ値）
• 主要な測定値の棒のカスタマイズ（ストローク、太さ）
• 比較測定値の実装（目標／ゴールのマーカー）
• 比較測定値の記号のカスタマイズ
• 視覚的な階層と重ね合わせ
• 測定値のバインディング

定性的な範囲

📄 参照： references/ranges.md

• 範囲コレクション（QualitativeRanges）の作成
• 範囲のプロパティ（RangeStart、RangeEnd、RangeStroke）
• 範囲のサイズと不透明度のカスタマイズ
• 範囲の色と目盛りおよびラベルとのバインディング
• 一般的な範囲パターン（不良／標準／良好）
• 範囲デザインのベストプラクティス

キャプションのカスタマイズ

📄 参照： references/caption.md

• ブレットグラフへのキャプションの追加
• キャプションの配置（Near、Far）
• キャプションの内容とレイアウトのカスタマイズ
• StackPanel を使用した複数行のキャプション
• キャプションのスタイルと書式設定
• XAML と C# のキャプションの例

高度な機能

📄 参照： references/advanced-features.md

• 向き（Horizontal、Vertical）
• フロー方向（RTL のサポート）
• ツールチップの設定とカスタマイズ
• 測定値と範囲用のカスタムツールチップテンプレート
• データバインディングのシナリオ
• MVVM パターンの実装
• パフォーマンス最適化のヒント

クイックスタートの例

XAML での基本的なブレットグラフ

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfBulletGraph 
            Minimum="0" 
            Maximum="10" 
            Interval="2"
            FeaturedMeasure="5" 
            ComparativeMeasure="7"
            MinorTicksPerInterval="3"
            MajorTickSize="15" 
            MinorTickSize="10">
            
            <syncfusion:SfBulletGraph.QualitativeRanges>
                <syncfusion:QualitativeRange RangeEnd="4.5" RangeStroke="#EBEBEB"/>
                <syncfusion:QualitativeRange RangeEnd="7.5" RangeStroke="#D8D8D8"/>
                <syncfusion:QualitativeRange RangeEnd="10" RangeStroke="#7F7F7F"/>
            </syncfusion:SfBulletGraph.QualitativeRanges>
        </syncfusion:SfBulletGraph>
    </Grid>
</Window>

C# での基本的なブレットグラフ

using Syncfusion.UI.Xaml.BulletGraph;

SfBulletGraph bulletGraph = new SfBulletGraph();
bulletGraph.Minimum = 0;
bulletGraph.Maximum = 10;
bulletGraph.Interval = 2;
bulletGraph.FeaturedMeasure = 5;
bulletGraph.ComparativeMeasure = 7;
bulletGraph.MinorTicksPerInterval = 3;
bulletGraph.MajorTickSize = 15;
bulletGraph.MinorTickSize = 10;

bulletGraph.QualitativeRanges.Add(new QualitativeRange() 
{ 
    RangeEnd = 4.5, 
    RangeStroke = new SolidColorBrush(Color.FromRgb(235, 235, 235)) 
});
bulletGraph.QualitativeRanges.Add(new QualitativeRange() 
{ 
    RangeEnd = 7.5, 
    RangeStroke = new SolidColorBrush(Color.FromRgb(216, 216, 216)) 
});
bulletGraph.QualitativeRanges.Add(new QualitativeRange() 
{ 
    RangeEnd = 10, 
    RangeStroke = new SolidColorBrush(Color.FromRgb(127, 127, 127)) 
});

this.Grid.Children.Add(bulletGraph);

よくあるパターン

キャプション付きの収益ダッシュボード

<syncfusion:SfBulletGraph 
    Minimum="0" 
    Maximum="100" 
    Interval="20"
    FeaturedMeasure="65" 
    ComparativeMeasure="80"
    CaptionPosition="Far"
    QualitativeRangesSize="30">
    
    <syncfusion:SfBulletGraph.Caption>
        <StackPanel Margin="0,0,10,0">
            <TextBlock Text="Revenue YTD" FontSize="13" HorizontalAlignment="Center"/>
            <TextBlock Text="$ in Thousands" FontSize="13" HorizontalAlignment="Center"/>
        </StackPanel>
    </syncfusion:SfBulletGraph.Caption>
    
    <syncfusion:SfBulletGraph.QualitativeRanges>
        <syncfusion:QualitativeRange RangeEnd="35" RangeStroke="Red" RangeOpacity="1"/>
        <syncfusion:QualitativeRange RangeEnd="70" RangeStroke="Yellow" RangeOpacity="1"/>
        <syncfusion:QualitativeRange RangeEnd="100" RangeStroke="Green" RangeOpacity="1"/>
    </syncfusion:SfBulletGraph.QualitativeRanges>
</syncfusion:SfBulletGraph>

縦型ブレットグラフ

<syncfusion:SfBulletGraph 
    Orientation="Vertical"
    Minimum="0" 
    Maximum="100" 
    Interval="25"
    FeaturedMeasure="75" 
    ComparativeMeasure="90"
    FeaturedMeasureBarStroke="Black">
    
    <syncfusion:SfBulletGraph.QualitativeRanges>
        <syncfusion:QualitativeRange RangeEnd="40" RangeStroke="#FF6B6B"/>
        <syncfusion:QualitativeRange RangeEnd="75" RangeStroke="#FFE66D"/>
        <syncfusion:QualitativeRange RangeEnd="100" RangeStroke="#95E1D3"/>
    </syncfusion:SfBulletGraph.QualitativeRanges>
</syncfusion:SfBulletGraph>

ツールチップ付きのブレットグラフ

<syncfusion:SfBulletGraph 
    Minimum="0" 
    Maximum="10" 
    FeaturedMeasure="6.5" 
    ComparativeMeasure="8"
    ShowToolTip="True"
    QualitativeRangesSize="30">
    
    <syncfusion:SfBulletGraph.QualitativeRanges>
        <syncfusion:QualitativeRange RangeEnd="4" RangeStroke="Red" RangeOpacity="0.8"/>
        <syncfusion:QualitativeRange RangeEnd="7" RangeStroke="Yellow" RangeOpacity="0.8"/>
        <syncfusion:QualitativeRange RangeEnd="10" RangeStroke="Green" RangeOpacity="0.8"/>
    </syncfusion:SfBulletGraph.QualitativeRanges>
</syncfusion:SfBulletGraph>

主なプロパティ

スケールのプロパティ

• Minimum - 数値スケールの開始値
• Maximum - 数値スケールの終了値
• Interval - 主目盛り間の間隔
• MinorTicksPerInterval - 主目盛り間の補助目盛りの数
• QuantitativeScaleLength - ピクセル単位のスケールの長さ

測定値のプロパティ

• FeaturedMeasure - 主なデータ値（現在のパフォーマンス）
• FeaturedMeasureBarStroke - 主な測定値のバーの色
• FeaturedMeasureBarStrokeThickness - 主な測定値のバーの太さ
• ComparativeMeasure - 目標値または比較値
• ComparativeMeasureSymbolStroke - 比較値マーカーの色
• ComparativeMeasureSymbolStrokeThickness - 比較値マーカーの太さ

目盛りとラベルのプロパティ

• MajorTickSize - 主目盛りのサイズ
• MajorTickStroke - 主目盛りの色
• MinorTickSize - 補助目盛りのサイズ
• MinorTickStroke - 補助目盛りの色
• LabelStroke - スケールラベルの色

範囲のプロパティ

• QualitativeRanges - 定性的な範囲オブジェクトのコレクション
• QualitativeRangesSize - 範囲帯の高さ／幅
• BindRangeStrokeToLabels - ラベルの色を範囲の色と同期
• BindRangeStrokeToTicks - 目盛りの色を範囲の色と同期

レイアウトのプロパティ

• Orientation - 水平または垂直のレイアウト
• FlowDirection - 左から右、または右から左
• Caption - ブレットグラフの説明コンテンツ
• CaptionPosition - Near（左／上）または Far（右／下）

ツールチップのプロパティ

• ShowToolTip - ツールチップ表示の有効／無効
• FeaturedMeasureToolTipTemplate - 主な測定値のツールチップ用カスタムテンプレート
• ComparativeMeasureToolTipTemplate - 比較値のツールチップ用カスタムテンプレート
• QualitativeRangeToolTipTemplate - 範囲のツールチップ用カスタムテンプレート