syncfusion-wpf-sparkline

WPF スパークラインの実装

Windows Presentation Foundation アプリケーションで Syncfusion® WPF Sparkline（SfSparkline）コントロールを実装するための包括的なガイドです。スパークラインは、軸や座標を使わずにデータの傾向を表示する、コンパクトで高度に凝縮されたチャートです。ダッシュボードやインラインの視覚化に最適です。

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

次のような場合に、このスキルを使用します。

• スパークラインを作成して、WPF アプリケーションでコンパクトにデータを視覚化する
• チャートの複雑さを抑えてデータの傾向を表示する
• ダッシュボード、テーブル、KPI 表示用のミニチャートを実装する
• スパークラインの種類（Line、Column、Area、WinLoss）を選択する
• 特定のデータポイントを強調するマーカーを追加する
• データを確認するためのトラックボールなど、インタラクティブな機能を有効化する
• 特定のポイントを強調するセグメントをカスタマイズする
• Y 軸の範囲を強調するレンジバンドを設定する
• 軸の表示と配置を制御する
• スパークラインコントロールにデータをバインドする
• テーマを適用し、外観をカスタマイズする
• スパークラインの描画やデータバインディングの問題をトラブルシューティングする

このスキルでは、4 種類すべてのスパークラインと、それぞれに固有の機能を、基本的な実装から高度なカスタマイズまで解説します。

コンポーネントの概要

Syncfusion WPF Sparkline（SfSparkline）は、データの傾向をシンプルで高度に凝縮された形式で示す非常に小さなチャートです。従来のチャートとは異なり、スパークラインは軸、ラベル、凡例を省略し、データの形状とパターンにのみ焦点を当てます。

主な機能：

• 4 種類のスパークライン： Line、Column、Area、WinLoss
• データバインディング： ObservableCollection、IEnumerable に対応
• マーカー： 最初、最後、最大、最小、負の値のポイントを強調
• インタラクティブ機能： マウスオーバー時にデータを確認できるトラックボール
• レンジバンド： 特定の Y 軸範囲を強調
• セグメントのカスタマイズ： 特定のデータポイントを色分け
• 軸の制御： 配置オプションを使用した軸の表示／非表示
• アニメーション： データの更新と遷移を滑らかに表示
• 空のポイントへの対応： 欠損データを適切に処理

一般的な用途：

• ダッシュボードの KPI インジケーター
• データグリッド内のインライントレンド表示
• 金融データの視覚化（株価、勝敗）
• パフォーマンス指標（売上、トラフィック、コンバージョン）
• コンパクトなレポートインターフェイス

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

はじめに

📄 参照： references/getting-started.md

初めてスパークラインを実装する場合は、まずこちらをお読みください。

• Syncfusion.SfChart.WPF パッケージのインストール
• プロジェクトへのアセンブリ参照の追加
• XAML と C# での名前空間のインポート
• 基本的なスパークラインコントロールの作成
• ObservableCollection を使用したデータモデルの設定
• ItemsSource と YBindingPath を使用したデータのバインド

スパークラインの種類

📄 参照： references/sparkline-types.md

特定の種類のスパークラインを選択または実装する場合は、こちらをお読みください。

• Line Sparkline（SfLineSparkline）- 連続するトレンド線
• Column Sparkline（SfColumnSparkline）- 個別の長方形の棒
• Area Sparkline（SfAreaSparkline）- トレンド線の下側を塗りつぶした領域
• WinLoss Sparkline（SfWinLossSparkline）- 勝ち／負け／引き分けのインジケーター
• 各スパークラインの種類の用途
• 各種類で必要なデータ構造
• XAML と C# による実装例一式

マーカーとカスタマイズ

📄 参照： references/markers.md

スパークラインにマーカーを追加またはカスタマイズする場合は、こちらをお読みください。

• MarkerVisibility プロパティによるマーカー表示の有効化
• 特定のポイントに対する MarkerTemplateSelector の使用
• 最初、最後、最大、最小、負の値のポイントの強調
• カスタムマーカーテンプレート（MarkerTemplate）
• マーカーのサイズ設定（MarkerHeight、MarkerWidth）
• 特定のデータポイントに合わせたマーカーのカスタマイズ
• 高度なマーカースタイル設定のテクニック

インタラクティブなトラックボール

📄 参照: references/track-ball.md

インタラクティブなデータ検査を実装する場合に参照してください：

• トラックボール機能の有効化（ShowTrackBall プロパティ）
• トラックボールの外観のカスタマイズ（TrackBallStyle、LineStyle）
• トラックボール表示へのラベルの追加
• OnSparklineMouseMove イベントの処理
• マウスホバー時のデータ値の表示
• トラックボールのマーカーと線のスタイル設定
• カスタムのトラックボール操作の作成

範囲バンド

📄 参照: references/range-band.md

Y 軸の特定の範囲を強調表示する場合に参照してください：

• 範囲バンドの設定（BandRangeStart、BandRangeEnd）
• 範囲バンドのブラシ色の設定（RangeBandBrush）
• 範囲の強調表示のユースケース（しきい値、目標値）
• コード全体を含む視覚的な例

セグメントのカスタマイズ

📄 参照: references/segment-customization.md

セグメントの色や強調表示をカスタマイズする場合に参照してください：

• ホバー時のセグメント強調表示の有効化（HighlightSegment）
• 特殊なセグメントに対する SegmentTemplateSelector の使用
• 最初、最後、最大、最小のポイントのブラシのカスタマイズ
• 負のポイントの強調表示
• Column および WinLoss セグメントの機能
• Line および Area セグメントの色設定
• カスタマイズの完全な例

軸の制御

📄 参照: references/axis-controls.md

軸の表示と外観を設定する場合に参照してください：

• 軸線の表示／非表示（ShowAxis プロパティ）
• 軸の位置設定（AxisOrigin プロパティ）
• 軸の外観のスタイル設定（AxisStyle）
• 軸のカスタム線スタイル
• 軸の適用対象（WinLoss タイプでは使用できません）
• スタイル設定の完全な例

クイックスタート

折れ線スパークラインを作成する最小限の例を紹介します。

XAML の実装

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    
    <Window.DataContext>
        <local:SparklineViewModel/>
    </Window.DataContext>
    
    <syncfusion:SfLineSparkline 
        ItemsSource="{Binding UsersList}" 
        YBindingPath="NoOfUsers"
        Interior="#4a4a4a"/>
        
</Window>

C# の実装

using Syncfusion.UI.Xaml.Charts;

// Create sparkline
SfLineSparkline sparkline = new SfLineSparkline()
{
    ItemsSource = new SparklineViewModel().UsersList,
    YBindingPath = "NoOfUsers",
    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
};

// Add to container
this.Content = sparkline;

データモデル

public class UserProfile
{
    public DateTime TimeStamp { get; set; }
    public double NoOfUsers { get; set; }
}

public class SparklineViewModel
{
    public ObservableCollection<UserProfile> UsersList { get; set; }
    
    public SparklineViewModel()
    {
        UsersList = new ObservableCollection<UserProfile>();
        DateTime date = DateTime.Today;
        
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 5000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = -3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(4), NoOfUsers = -4000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(5), NoOfUsers = 2000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(6), NoOfUsers = 3000 });
    }
}

一般的なパターン

パターン 1：離散値の列スパークライン

<syncfusion:SfColumnSparkline 
    ItemsSource="{Binding SalesData}" 
    YBindingPath="Amount"
    HighlightSegment="True"/>

パターン 2：二値結果の WinLoss スパークライン

<syncfusion:SfWinLossSparkline 
    ItemsSource="{Binding MatchResults}" 
    YBindingPath="Result"/>

パターン 3：マーカーとトラックボールを備えた折れ線スパークライン

<syncfusion:SfLineSparkline 
    ItemsSource="{Binding TrendData}" 
    YBindingPath="Value"
    MarkerVisibility="Visible"
    ShowTrackBall="True">
    
    <syncfusion:SfLineSparkline.MarkerTemplateSelector>
        <syncfusion:MarkerTemplateSelector 
            FirstPointBrush="Yellow" 
            LastPointBrush="Yellow"
            HighPointBrush="Red"
            LowPointBrush="Blue"
            MarkerHeight="10" 
            MarkerWidth="10"/>
    </syncfusion:SfLineSparkline.MarkerTemplateSelector>
    
</syncfusion:SfLineSparkline>

パターン 4：範囲バンド付きスパークライン

<syncfusion:SfAreaSparkline 
    ItemsSource="{Binding PerformanceData}" 
    YBindingPath="Score"
    BandRangeStart="80"
    BandRangeEnd="100"
    RangeBandBrush="LightGreen"/>

主なプロパティ

プロパティ	型	説明
ItemsSource	IEnumerable	バインドするデータコレクション
YBindingPath	string	Y 軸の値を示すプロパティパス
XBindingPath	string	X 軸の値を示すプロパティパス（省略可）
Interior	Brush	スパークラインの塗りつぶし色
BorderBrush	Brush	境界線の色
BorderThickness	Thickness	境界線の太さ
MarkerVisibility	Visibility	マーカーの表示／非表示
ShowTrackBall	bool	トラックボール機能を有効にする
ShowAxis	bool	軸線を表示する
AxisOrigin	double	Y 軸上の軸の位置
HighlightSegment	bool	ホバー時にセグメントを強調表示する（Column／WinLoss）
BandRangeStart	double	範囲バンドの開始値
BandRangeEnd	double	範囲バンドの終了値
RangeBandBrush	Brush	範囲バンドの塗りつぶし色

一般的なユースケース

ユースケース 1：ダッシュボードでの KPI の傾向

売上、トラフィック、コンバージョンなどの主要な指標を時系列で示す複数のスパークラインを、コンパクトなダッシュボードレイアウトに表示します。

推奨: 最小値／最大値を強調表示するマーカー付きの折れ線またはエリアスパークライン。

ユースケース 2：データグリッドとの統合

データグリッドのセルにスパークラインを埋め込み、表形式の情報と並べて傾向データを表示します。

推奨: 離散データには列スパークライン、連続的な傾向には折れ線スパークライン。

ユースケース 3：財務上の勝敗インジケーター

取引結果、ゲームの結果、または二値のパフォーマンス指標を表示します。

推奨: 勝ち、負け、引き分けにカスタムのセグメント色を設定した WinLoss スパークライン。

ユースケース 4：目標値に対するパフォーマンス

目標範囲を強調表示して指標を視覚化します（例：「許容範囲」を示す緑色の領域）。

推奨: 目標のしきい値を示す範囲バンド付きのエリアまたは折れ線スパークライン。

ユースケース 5：インタラクティブなデータ探索

スパークラインにマウスカーソルを合わせると、インターフェースを煩雑にすることなく、正確なデータ値を確認できるようにします。

推奨： トラックボールを有効にし、カスタムラベルを設定した任意のスパークラインタイプ。

関連コンポーネント

より包括的なデータの可視化が必要な場合：

• チャート - 軸、凡例、複数の系列を備えたフル機能のチャート
• その他のデータ可視化コンポーネント（近日公開）

トラブルシューティング

よくある問題：

• データが表示されない： ItemsSource のバインディングと YBindingPath のプロパティ名を確認してください
• マーカーが表示されない： MarkerVisibility が Visible に設定されていることを確認してください
• トラックボールが機能しない： ShowTrackBall="True" に設定されていること、およびスパークラインタイプが Line または Area であることを確認してください
• 軸が表示されない： ShowAxis プロパティを確認してください（WinLoss タイプではサポートされていません）

詳細なトラブルシューティングについては、各機能のリファレンスドキュメントを参照してください。