syncfusion-winforms-pivot-chart

Syncfusion Pivot Chart の実装

Windows Forms アプリケーションに Syncfusion Pivot Chart コントロールを実装するための包括的なガイドです。Pivot Chart は、ドリルダウン機能を備えた多次元ピボットデータのインタラクティブな視覚化を提供し、11 種類以上のチャートタイプと、グループ化バー、フィールドリスト、Excel エクスポートなどの高度な機能に対応しています。

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

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

• 複数のチャートタイプでピボットデータをグラフ形式で視覚化する
• 階層データレベルを移動するためのドリルダウン／ドリルアップ機能を実装する
• インタラクティブなピボット視覚化を備えたビジネスインテリジェンスダッシュボードを作成する
• IEnumerable リストまたは DataTables の多次元データを分析する
• 分析アプリケーション向けのOLAP 視覚化インターフェイスを構築する
• グループ化バーとピボットフィールドリストを使用したインタラクティブなデータ探索を追加する
• レポート作成用にピボットチャートを Excel 形式でエクスポートする
• 階層的な売上、財務、分析データをチャート形式で表示する
• Windows Forms アプリケーションにExcel のようなピボットチャート機能を実装する
• ピボットフィールドの選択に応じて更新される動的なチャートを作成する

コンポーネントの概要

Syncfusion Pivot Chart は、ピボット情報を読み取り、グラフ形式で視覚化する軽量かつ高パフォーマンスなコントロールです。次の機能を備えています。

• 11 種類以上のチャートタイプ： 折れ線、スプライン、縦棒、面、スプライン面、積み上げ面、積み上げ縦棒、100% 積み上げ面、100% 積み上げ縦棒、ステップ折れ線、ステップ面
• ドリル対応： ドリルダウン／ドリルアップでデータ階層の内側のレベルに移動
• データバインディング： IEnumerable リストおよび DataTable ソースに対応
• ピボットテーブルフィールドリスト： Microsoft Excel に似た組み込みのピボットスキーマデザイナー
• グループ化バー： データフィールドをインタラクティブにドラッグ＆ドロップでグループ化
• 凡例： 色分けされた系列の識別
• エクスポート： Excel 形式へのエクスポート
• ズームとスクロール： インタラクティブなデータ探索
• タッチ対応： タブレットやタッチ対応デバイスに適した操作性
• リアルタイム更新： データの変更時にチャートを自動更新

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

はじめに

📄 参照： references/getting-started.md

• アセンブリの配置と依存関係
• デザイナー、コード、または Syncfusion Reference Manager を使ったコントロールの追加
• ライセンス要件（v16.2.0.x 以降）
• 基本的な初期化と最初のデータバインディング
• ItemSource、PivotAxis、PivotLegend、PivotCalculations の設定

データバインディング

📄 参照： references/data-binding.md

• IEnumerable リストおよび DataTable ソースのバインド
• ItemSource プロパティの設定
• 階層データ用の PivotAxis の設定
• 系列の分類に使用する PivotLegend の設定
• データ集計に使用する PivotCalculations の設定
• EnableUpdating を使ったリアルタイム更新
• BeginUpdate/EndUpdate を使ったパフォーマンスの最適化

チャートタイプ

📄 参照： references/chart-types.md

• 対応する 11 種類のチャートタイプの概要
• 折れ線、スプライン、ステップ折れ線チャート
• 縦棒チャートと積み上げ縦棒チャート
• 面、スプライン面、ステップ面チャート
• 積み上げ面チャートと積み上げ縦棒（100%）チャート
• チャートタイプの動的な切り替え
• ChartTypes 列挙型
• データに適したチャートタイプの選択

ドリル操作

📄 参照： references/drill-operations.md

• ドリルダウン／ドリルアップ機能の有効化
• AllowDrillDown プロパティの設定
• 階層データレベルの移動
• 展開ボタンを使ったドリル操作
• プログラムによるドリル操作
• ユーザー操作とドリルイベント

グループ化バー

📄 参照： references/grouping-bar.md

• グループ化バーの有効化と設定
• インタラクティブなドラッグ＆ドロップによるフィールドのグループ化
• フィールドの操作と並べ替え
• 表示とカスタマイズのオプション
• グループ化バーでのユーザー操作

Pivot 軸の構成

📄 参照： references/pivot-axis.md

• PivotAxis プロパティについて
• 軸への PivotItem オブジェクトの追加
• データフィールドのバインドに使用する FieldMappingName
• 集計表示用の TotalHeader
• 階層構造に対応する複数の軸項目
• 軸のカスタマイズオプション

Pivot テーブルのフィールドリスト

📄 参照： references/pivot-table-field-list.md

• 組み込みの Pivot スキーマデザイナー
• Microsoft Excel に似たフィールドリストインターフェイス
• フィールドリストの有効化と表示
• ドラッグ＆ドロップによるフィールドの構成
• フィルターの設定と管理
• 計算フィールドの構成
• フィールドリストでのユーザー操作

凡例

📄 参照： references/legend.md

• PivotLegend プロパティの構成
• 系列を識別するための色分け
• 凡例の位置とレイアウト
• 表示設定とカスタマイズオプション
• 系列ラベルと書式設定

並べ替え

📄 参照： references/sorting.md

• チャート内の Pivot データの並べ替え
• 昇順と降順の並べ替え順
• 複数フィールドの並べ替えとカスタム並べ替えロジック
• 並べ替えの構成オプション

エクスポート

📄 参照： references/export.md

• Pivot チャートの Excel へのエクスポート
• エクスポートの構成とオプション
• ファイル形式の設定
• プログラムによるエクスポート操作
• エクスポート結果のカスタマイズ

ズームとスクロール

📄 参照： references/zooming-scrolling.md

• インタラクティブなズーム機能
• 大規模なデータセットのスクロール対応とマウスホイールによるズーム操作
• ズームの構成とカスタマイズ
• スクロールバーの外観と動作

タッチサポート

📄 参照： references/touch-support.md

• タブレットでのタッチジェスチャー対応
• タッチ操作（タップ、スワイプ、ピンチ）
• タッチ対応デバイス向けの最適化
• タッチジェスチャーの構成
• モバイル端末とタブレットに関する考慮事項

外観とカスタマイズ

📄 参照： references/appearance-customization.md

• チャート領域のカスタマイズ
• 系列のスタイルと色、およびカラーパレットの構成
• 印刷対応と設定
• カスタムスタイルのオプション

トラブルシューティング

📄 参照： references/troubleshooting.md

• よくある問題と解決策
• データバインディングのエラーと修正方法
• パフォーマンス最適化のヒント
• ドリルダウンを有効にする方法と Pivot チャートを印刷する方法
• カスタムカラーパレットの設定方法、デバッグと診断のヒント

クイックスタートの例

最小限の Pivot チャートの実装

using System;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.PivotChart;
using Syncfusion.PivotAnalysis.Base;

namespace PivotChartDemo
{
    public partial class Form1 : Form
    {
        private PivotChart pivotChart1;
        
        public Form1()
        {
            InitializeComponent();
            
            // Initialize Pivot Chart
            pivotChart1 = new PivotChart();
            pivotChart1.Dock = DockStyle.Fill;
            
            // Bind data source
            pivotChart1.ItemSource = ProductSales.GetSalesData();
            
            // Configure Pivot Axis (hierarchical structure)
            pivotChart1.PivotAxis.Add(new PivotItem 
            { 
                FieldMappingName = "Product", 
                TotalHeader = "Total" 
            });
            pivotChart1.PivotAxis.Add(new PivotItem 
            { 
                FieldMappingName = "Country", 
                TotalHeader = "Total" 
            });
            pivotChart1.PivotAxis.Add(new PivotItem 
            { 
                FieldMappingName = "State", 
                TotalHeader = "Total" 
            });
            
            // Configure Pivot Legend (series categorization)
            pivotChart1.PivotLegend.Add(new PivotItem 
            { 
                FieldMappingName = "Date", 
                TotalHeader = "Total" 
            });
            
            // Configure Calculations (data aggregation)
            pivotChart1.PivotCalculations.Add(new PivotComputationInfo 
            { 
                FieldName = "Quantity", 
                Format = "#,##0" 
            });
            
            // Set chart type
            pivotChart1.ChartTypes = PivotChartTypes.Column;
            
            // Enable drill-down
            pivotChart1.AllowDrillDown = true;
            
            // Add to form
            this.Controls.Add(pivotChart1);
        }
    }
}

よくあるパターン

パターン 1：IEnumerable コレクションへのバインド

using System.Collections.Generic;

// Data model
public class SalesData
{
    public string Product { get; set; }
    public string Region { get; set; }
    public string Quarter { get; set; }
    public int Quantity { get; set; }
    public decimal Amount { get; set; }
}

// Create and bind data
private void BindPivotChart()
{
    List<SalesData> salesList = new List<SalesData>
    {
        new SalesData { Product = "Laptop", Region = "North", Quarter = "Q1", Quantity = 50, Amount = 50000 },
        new SalesData { Product = "Laptop", Region = "South", Quarter = "Q1", Quantity = 40, Amount = 40000 },
        new SalesData { Product = "Mouse", Region = "North", Quarter = "Q1", Quantity = 200, Amount = 6000 },
        // Add more data...
    };
    
    pivotChart1.ItemSource = salesList;
    
    // Configure fields
    pivotChart1.PivotAxis.Add(new PivotItem { FieldMappingName = "Product", TotalHeader = "Total" });
    pivotChart1.PivotLegend.Add(new PivotItem { FieldMappingName = "Quarter", TotalHeader = "Total" });
    pivotChart1.PivotCalculations.Add(new PivotComputationInfo 
    { 
        FieldName = "Amount", 
        Format = "C",
        SummaryType = SummaryType.DoubleTotalSum 
    });
}

パターン 2：チャートの種類を動的に切り替える

// Add buttons or menu items to switch chart types
private void btnLineChart_Click(object sender, EventArgs e)
{
    pivotChart1.ChartTypes = PivotChartTypes.Line;
}

private void btnColumnChart_Click(object sender, EventArgs e)
{
    pivotChart1.ChartTypes = PivotChartTypes.Column;
}

private void btnAreaChart_Click(object sender, EventArgs e)
{
    pivotChart1.ChartTypes = PivotChartTypes.Area;
}

private void btnStackingColumn_Click(object sender, EventArgs e)
{
    pivotChart1.ChartTypes = PivotChartTypes.StackingColumn;
}

パターン 3：階層的なドリルダウンの構成

// Enable drill-down with multiple hierarchy levels
private void ConfigureDrillDown()
{
    pivotChart1.AllowDrillDown = true;
    
    // Define hierarchy: Category → Product → Region → State
    pivotChart1.PivotAxis.Clear();
    pivotChart1.PivotAxis.Add(new PivotItem 
    { 
        FieldMappingName = "Category", 
        TotalHeader = "All Categories" 
    });
    pivotChart1.PivotAxis.Add(new PivotItem 
    { 
        FieldMappingName = "Product", 
        TotalHeader = "All Products" 
    });
    pivotChart1.PivotAxis.Add(new PivotItem 
    { 
        FieldMappingName = "Region", 
        TotalHeader = "All Regions" 
    });
    pivotChart1.PivotAxis.Add(new PivotItem 
    { 
        FieldMappingName = "State", 
        TotalHeader = "All States" 
    });
}

パターン 4：リアルタイムのデータ更新

// Enable automatic updates when data changes
private void ConfigureRealTimeUpdates()
{
    // Enable automatic chart updates
    pivotChart1.EnableUpdating = true;
    
    // Bind to observable collection or implement INotifyPropertyChanged
    var salesData = new BindingList<SalesData>(GetSalesData());
    pivotChart1.ItemSource = salesData;
    
    // Now any changes to salesData will automatically update the chart
}

// For bulk updates, use BeginUpdate/EndUpdate
private void BulkDataUpdate()
{
    pivotChart1.BeginUpdate();
    
    try
    {
        // Perform multiple data operations
        var data = (BindingList<SalesData>)pivotChart1.ItemSource;
        for (int i = 0; i < 100; i++)
        {
            data.Add(new SalesData { /* ... */ });
        }
    }
    finally
    {
        pivotChart1.EndUpdate(); // Chart updates once after all changes
    }
}

パターン 5：書式設定を伴う複数の計算

// Display multiple aggregated values with custom formatting
private void ConfigureMultipleCalculations()
{
    pivotChart1.PivotCalculations.Clear();
    
    // Total quantity
    pivotChart1.PivotCalculations.Add(new PivotComputationInfo
    {
        FieldName = "Quantity",
        Format = "#,##0",
        SummaryType = SummaryType.DoubleTotalSum,
        FieldHeader = "Total Qty"
    });
    
    // Total amount (currency)
    pivotChart1.PivotCalculations.Add(new PivotComputationInfo
    {
        FieldName = "Amount",
        Format = "C2",
        SummaryType = SummaryType.DoubleTotalSum,
        FieldHeader = "Total Amount"
    });
    
    // Average price
    pivotChart1.PivotCalculations.Add(new PivotComputationInfo
    {
        FieldName = "UnitPrice",
        Format = "C2",
        SummaryType = SummaryType.DoubleAverage,
        FieldHeader = "Avg Price"
    });
}

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

コアプロパティ

Property	Type	Description
ItemSource	object	データソース（IEnumerable または DataTable）
PivotAxis	PivotItemCollection	チャート軸のフィールド（階層構造）
PivotLegend	PivotItemCollection	凡例／系列のフィールド
PivotCalculations	PivotComputationInfoCollection	計算／集計フィールド
ChartTypes	PivotChartTypes	チャートの種類（Line、Column、Area など）
AllowDrillDown	bool	ドリルダウン／ドリルアップ操作を有効化
EnableUpdating	bool	データ変更時に自動更新

PivotItem のプロパティ

Property	Type	Description
FieldMappingName	string	バインドするデータフィールド名
TotalHeader	string	合計／集計行のヘッダーテキスト
FieldHeader	string	フィールドの表示ヘッダー

PivotComputationInfo のプロパティ

プロパティ	型	説明
FieldName	string	計算するフィールドの名前
Format	string	数値書式文字列
SummaryType	SummaryType	集計の種類（合計、平均、件数など）
FieldHeader	string	計算の表示名

主なメソッド

メソッド	説明
BeginUpdate()	一括操作中のチャート更新を一時停止します
EndUpdate()	チャートの更新を再開してリフレッシュします
Refresh()	チャートを手動でリフレッシュします

一般的なユースケース

ビジネスインテリジェンスダッシュボード

• 商品、地域、期間ごとに売上データを可視化します
• 年次から四半期、月次のビューへドリルダウンします
• 複数の指標（数量、売上、利益）を比較します

財務分析

• 部門、期間、カテゴリごとに財務データを表示します
• 階層的なドリルダウンを使用して、予算と実際の支出を分析します
• 事業部門ごとの損益の推移を可視化します

マーケティング分析

• チャネル、地域、期間ごとにキャンペーンの成果を分析します
• 複数の KPI（インプレッション、クリック、コンバージョン）を比較します
• キャンペーンレベルから広告グループレベルへドリルダウンします

パフォーマンスに関する考慮事項

1. 一括データ操作には BeginUpdate/EndUpdate を使用することで、複数回の再描画を防ぎます
2. 階層の深さを制限する — パフォーマンスと使いやすさの観点から、3～4 レベルが最適です
3. データセット全体をバインドするのではなく、バインド前にデータをフィルター処理します
4. データ量を考慮する — 非常に大きなデータセット（100k+ 行）では、事前にデータを集計します

ベストプラクティス

1. ピボットチャートコントロールを作成する前に、必ずライセンスキーを登録します
2. 直感的にドリルダウンできるよう、PivotAxis で明確な階層を定義します
3. ユーザーが理解しやすいよう、わかりやすい TotalHeader の値を使用します
4. 計算を適切な形式（通貨、パーセンテージ、数値）で書式設定します
5. データに意味のある階層構造がある場合にのみ、ドリルダウンを有効にします
6. インタラクティブにデータを探索できるよう、グルーピングバーまたはフィールドリストを使用します