syncfusion-winforms-sparkline

Syncfusion Windows Forms Sparkline の実装

Windows Forms Sparkline コントロールは、コンパクトなグラフィカル形式で傾向や変化を表示するための、高密度で省スペースなデータ可視化を実現します。スパークラインは軸目盛りを使用せず、わずかなスペースでデータの時間的なパターンをすばやく把握できます。

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

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

• Windows Forms アプリケーション内にコンパクトな傾向の可視化を作成する
• 小さなスペース（テーブルのセル、ダッシュボード、レポート）に高密度のデータを表示する
• 詳細な軸目盛りなしでデータのパターンを示す
• 折れ線、縦棒、勝敗のスパークラインチャートを実装する
• 特定のデータポイント（最大値、最小値、開始、終了、負の値）を強調表示する
• 重要なデータポイントを目立たせる視覚的マーカーを追加する
• さまざまなデータソース（DataTable、IEnumerable、ICollection、IList）にスパークラインをバインドする
• スパークラインの外観とスタイルをカスタマイズする
• データ範囲をすばやく比較できるようにする
• 傾向や変化を軽量なグラフィックで表現する

コンポーネントの概要

Syncfusion Windows Forms Sparkline は、次の特徴を備えたインフォメーショングラフィックコントロールです。

• 小さいサイズ：コンパクトな表示に適した最小限のフットプリント
• 高いデータ密度：最小限のスペースで最大限の情報を表示
• 軽量な描画：効率的なグラフィックによる高速なパフォーマンス
• 3 種類のチャートタイプ：Line、Column、WinLoss
• マーカーのサポート：重要なデータポイントを示す視覚的インジケーター
• 柔軟なデータバインディング：複数のデータソースタイプに対応

主な機能：

• 3 種類のスパークライン（Line、Column、WinLoss）
• 色をカスタマイズできるデータポイントマーカー
• 最大値、最小値、開始、終了、負の値のポイントの強調表示
• 線と縦棒のカスタムスタイル
• 背景のカスタマイズ
• 複数形式のデータソースへのバインディング
• Visual Studio ツールボックスとのデザイナー連携

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

はじめに

📄 参照： references/getting-started.md

• アセンブリの配置と NuGet パッケージのインストール
• デザイナーを使用した Windows Forms への Sparkline コントロールの追加
• ツールボックスとの連携
• 基本的なデータソースのバインディング
• 最初のスパークラインの実装
• スパークラインへのマーカーの追加
• 最大値と最小値の強調表示

スパークラインの種類

📄 参照： references/sparkline-types.md

• 3 種類のスパークラインの概要
• Line スパークライン：データポイントを線で接続
• Column スパークライン：正負を表す縦棒
• WinLoss スパークライン：勝敗のパターンを表す同じ長さの縦棒
• データソースのサポート（DataTable、IEnumerable、ICollection、IList）
• ユースケースに基づいたタイプの選択ガイド

マーカーのカスタマイズ

📄 参照： references/marker-customization.md

• マーカーのプロパティと設定
• ShowMarker、ShowHighPoint、ShowLowPoint、ShowStartPoint、ShowEndPoint、ShowNegativePoint
• 各ポイントタイプのマーカー色
• Line スパークラインのマーカー（すべてのデータポイント）
• Column スパークラインのマーカー（最大値、最小値、開始、終了、負の値）
• WinLoss スパークラインのマーカー
• BrushInfo によるグラデーションのサポート
• マーカーのカスタマイズ例一式

外観のカスタマイズ

📄 参照： references/appearance-customization.md

• LineStyle のカスタマイズ（色、外観）
• ColumnStyle のカスタマイズ（色、スタイル）
• BackInterior プロパティ（背景色）
• スタイル設定の例一式

クイックスタートの例

using Syncfusion.Windows.Forms.Chart;

// Create sparkline instance
SparkLine sparkLine1 = new SparkLine();

// Set data source
sparkLine1.Source = new double[] { 30, -20, 80, 20, 40, -50, -30, 70, -40, 50 };

// Set sparkline type (Line, Column, or WinLoss)
sparkLine1.Type = SparkLineType.Line;

// Enable markers for high and low points
sparkLine1.Markers.ShowHighPoint = true;
sparkLine1.Markers.ShowLowPoint = true;
sparkLine1.Markers.HighPointColor = new BrushInfo(Color.Blue);
sparkLine1.Markers.LowPointColor = new BrushInfo(Color.Red);

// Customize line appearance
sparkLine1.LineStyle.LineColor = Color.Maroon;

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

よく使われるパターン

パターン 1：ダッシュボードの傾向インジケーター

// Small sparklines for dashboard KPI trends
SparkLine salesTrend = new SparkLine();
salesTrend.Source = salesData; // double[] or DataTable
salesTrend.Type = SparkLineType.Line;
salesTrend.Markers.ShowEndPoint = true;
salesTrend.Markers.EndPointColor = new BrushInfo(Color.Green);
salesTrend.Size = new Size(100, 30); // Compact size

パターン 2：勝敗の可視化

// WinLoss sparkline for binary outcomes
SparkLine winLoss = new SparkLine();
winLoss.Source = new double[] { 1, -1, 1, 1, -1, 1, -1, -1, 1, 1 };
winLoss.Type = SparkLineType.WinLoss;
winLoss.Markers.ShowNegativePoint = true;
winLoss.Markers.NegativePointColor = new BrushInfo(Color.Red);

パターン 3：強調表示付き Column スパークライン

// Column sparkline with high/low highlighting
SparkLine columnChart = new SparkLine();
columnChart.Source = monthlyData;
columnChart.Type = SparkLineType.Column;
columnChart.Markers.ShowHighPoint = true;
columnChart.Markers.ShowLowPoint = true;
columnChart.Markers.ShowStartPoint = true;
columnChart.Markers.ShowEndPoint = true;
columnChart.Markers.HighPointColor = new BrushInfo(Color.Green);
columnChart.Markers.LowPointColor = new BrushInfo(Color.Red);

パターン 4：すべてのマーカーを表示する Line スパークライン

// Line sparkline showing all data point markers
SparkLine lineWithMarkers = new SparkLine();
lineWithMarkers.Source = dataPoints;
lineWithMarkers.Type = SparkLineType.Line;
lineWithMarkers.Markers.ShowMarker = true; // Show all points
lineWithMarkers.Markers.MarkerColor = new BrushInfo(Color.DarkBlue);
lineWithMarkers.LineStyle.LineColor = Color.Blue;

主なプロパティとメソッド

主なプロパティ

Type (SparkLineType)

• スパークラインの種類（Line、Column、WinLoss）を指定します
• デフォルト：Line
• 用途：表示スタイルを決定します

Source (object)

• スパークラインのデータポイントのデータソースを取得または設定します
• 対応形式：double[]、DataTable、IEnumerable、ICollection、IList
• 用途：データをスパークラインの表示にバインドします

Markers (Markers)

• スパークラインのマーカーを有効にします
• プロパティ：ShowMarker、ShowHighPoint、ShowLowPoint、ShowStartPoint、ShowEndPoint、ShowNegativePoint
• 色のプロパティ：MarkerColor、HighPointColor、LowPointColor、StartPointColor、EndPointColor、NegativePointColor
• 用途：特定のデータポイントを視覚的に強調します

LineStyle (LineStyle)

• 線のスパークラインの外観をカスタマイズします
• プロパティには次のものがあります：LineColor
• 用途：線のスパークラインの視覚スタイルを制御します

ColumnStyle (ColumnStyle)

• 縦棒およびWinLossスパークラインの外観をカスタマイズします
• 用途：縦棒のスパークラインの視覚スタイルを制御します

BackInterior (BrushInfo)

• コントロールの背景色をカスタマイズします
• デフォルト：白
• 用途：スパークラインの背景の外観を設定します

主なメソッド

GetHighPoint() - スパークラインの最大値を取得します

GetLowPoint() - スパークラインの最小値を取得します

GetStartPoint() - スパークラインの開始点の値を取得します

GetEndPoint() - スパークラインの終了点の値を取得します

よくある使用例

使用例1：テーブル内の傾向の表示

DataGridViewのセルにスパークラインを配置し、テーブルの幅を広げずに表形式データと並べて傾向を表示します。

使用例2：ダッシュボードのKPI

ダッシュボードに複数のコンパクトなスパークラインを表示し、主要業績評価指標の傾向を一目で確認できるようにします。

使用例3：財務データの可視化

株価の変動には線のスパークライン、出来高データには縦棒のスパークライン、損益パターンにはWinLossを使用します。

使用例4：パフォーマンス指標

サーバーのパフォーマンス、応答時間、システム指標を、最小限のスペースで時系列に表示します。

使用例5：比較ウィジェット

A/Bテストの結果、キャンペーンのパフォーマンス、指標の比較に使うスパークラインを横並びで作成します。