syncfusion-vue-pivot-table

Syncfusion Vue PivotView の実装

Syncfusion Vue Pivot Grid は、インタラクティブなピボットテーブルの作成、多次元データの集計、高度な分析操作を行うための強力なデータ可視化・分析コンポーネントです。

重要： API のクラス名、プロパティ、メソッドのシグネチャは、必ずこのスキルのリファレンスファイル（references/*.md）を参照して確認してください。これらのファイルには、検証済みの動作する例が掲載されています。他の情報源から API の詳細を推測しないでください。

⚠️ セキュリティ警告：データソースの検証

重大なセキュリティに関する注意： ピボットテーブルを実装する際は、必ず信頼できるデータソースを使用してください。適切な検証とサニタイズを行わずに、信頼できない URL やユーザーが指定した URL からデータを取得したり、データをバインドしたりしないでください。

セキュリティのベストプラクティス：

1. ローカルデータを使用する：セキュリティを最大限に高めるため、ローカルのインメモリデータソースを優先します
2. リモートソースを検証する：管理下にある、認証済みかつ認可済みの API エンドポイントのみに接続します
3. ユーザー入力をサニタイズする：ユーザーが任意の URL やデータソースを指定できないようにします
4. 認証を実装する：必ず認証ヘッダーとセキュアな API エンドポイントを使用します
5. コンテンツを検証する：外部ソースから受信したすべてのデータを、バインドする前に検証してサニタイズします
6. HTTPS を使用する：リモートデータ接続には必ず HTTPS を使用します
7. レート制限を設ける：不正利用を防ぐため、API エンドポイントにレート制限を実装します

セキュリティリスク：

• 間接的なプロンプトインジェクション：信頼できないサードパーティのデータに、AI エージェントの動作を操作する悪意のあるコンテンツが含まれている可能性があります
• データの窃取：悪意のあるデータソースが、機密情報の抽出を試みる可能性があります
• コードインジェクション：信頼できないデータに、スクリプトや有害なコンテンツが含まれている可能性があります

推奨される方法：

✅ 推奨：管理下にある、認証済みのバックエンド API を使用します
✅ 推奨：サーバー側のデータ検証を実装します
✅ 推奨：API エンドポイントには環境変数を使用します
✅ 推奨：許可するデータソースをホワイトリストに登録します

❌ 禁止：ユーザーが指定した URL を受け入れないでください
❌ 禁止：公開されている、信頼できないエンドポイントにバインドしないでください
❌ 禁止：データの検証とサニタイズを省略しないでください
❌ 禁止：機密データに HTTP を使用しないでください

目次

• 概要
• コア API とプロパティ
• イベント
• はじめに
• データバインディングとデータソース
• データ操作と書式設定
• データ分析とピボット操作
• ドリルダウンとナビゲーション
• 可視化とレイアウト
• エクスポートとツールバー
• 状態とパフォーマンス

---

概要

Syncfusion Vue PivotView（ピボットテーブル）コンポーネントは、大規模なデータセットを分析・可視化するための、強力でインタラクティブな手段を提供します。次の機能をサポートしています。

• 複数のデータソース（JSON、OLAP、MySQL、SQL Server、MongoDB などのリレーショナルデータベース）
• 詳細な分析のための豊富なドリルダウン機能
• データを視覚的に表現するピボットチャート
• Excel、CSV、PDF へのエクスポート
• カスタマイズ可能なレイアウト（コンパクト形式とクラシック／表形式）
• 大規模なデータセット向けのパフォーマンス最適化
• ユーザー体験の継続性を保つ状態の永続化

次の実装では、このスキルを使用してください。

• Vue アプリケーションのピボットテーブル
• データ集計・分析 UI
• インタラクティブなデータ探索インターフェース
• ビジネスインテリジェンスダッシュボード

---

コア API とプロパティ

コンポーネントのプロパティ

プロパティ	型	説明
dataSourceSettings	IDataOptions	データソース、行、列、値、フィルター、書式を設定します
height	number | string	コンポーネントの高さをピクセル数またはパーセンテージで設定します
width	number | string	コンポーネントの幅をピクセル数またはパーセンテージで設定します
gridSettings	IGridSettings	レイアウト（コンパクト／表形式）、列幅、行の高さ、サイズ変更を制御します
displayOption	IDisplayOption	グリッドとチャートの表示を制御します：{ view: 'Grid' | 'Chart' | 'Both' }
chartSettings	IChartSettings	チャートの種類、系列、凡例、軸、ツールチップを設定します
groupingBarSettings	IGroupingBarSettings	グループ化バーの外観と動作をカスタマイズします
allowExcelExport	boolean	Excel エクスポート機能を有効にします
allowPdfExport	boolean	PDF エクスポート機能を有効にします
allowCsvExport	boolean	CSV エクスポート機能を有効にします
allowMemberFilter	boolean	UI でメンバーのフィルタリングを有効にします
allowLabelFilter	boolean	UI でラベルのフィルタリングを有効にします
allowValueFilter	boolean	UI で値のフィルタリングを有効にします
allowSorting	boolean	並べ替え機能を有効にします
allowDrilling	boolean	ドリルダウン／ドリルスルー操作を有効にします
allowDrillThrough	boolean	詳細データへのドリルスルーを有効にします（allowDrilling よりも詳細な設定です）
allowResizing	boolean	列と行のサイズ変更を有効にします
allowNumberFormatting	boolean	ツールバーとダイアログに数値書式設定のオプションを表示します
allowConditionalFormatting	boolean	ツールバーボタンから条件付き書式設定機能を有効にします
allowCalculatedField	boolean	計算フィールドの作成を有効にします
showFieldList	boolean	フィールドリストパネル（フィールド設定用 UI）を表示します
showGroupingBar	boolean	上部にグループ化バー（ドラッグ＆ドロップでフィールドを整理する UI）を表示します
showToolbar	boolean	エクスポート、レポート、フィールド管理用のボタンを備えたツールバーを表示します
toolbar	string[]	ツールバー項目の配列：['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', 'Grid', 'Chart', 'MDX', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList']
showTooltip	boolean	セルにカーソルを合わせたときにツールチップを表示します
enablePersistence	boolean	ピボットの状態を自動的にローカルストレージに保存します
conditionalFormatSettings	IConditionalFormatSettings[]	条件付き書式設定ルール（値の範囲、演算子、スタイル）を事前に定義します
aggregateTypes	string[]	ドロップダウンで選択できる集計タイプを制限します
maxNodeLimitInMemberEditor	number	メンバーフィルターダイアログで読み込むメンバーの最大数（デフォルトは 1000）
saveReport	Function(args)	ユーザーがツールバーからレポートを保存したときのコールバックです
loadReport	Function(args)	ユーザーがツールバーからレポートを読み込んだときのコールバックです
renameReport	Function(args)	ユーザーがツールバーからレポートの名前を変更したときのコールバックです
removeReport	Function(args)	ユーザーがツールバーからレポートを削除したときのコールバックです
newReport	Function(args)	ユーザーがツールバーから新しいレポートを作成したときのコールバックです
fetchReport	Function()	保存済みレポートの一覧を取得するためのコールバックです

DataSourceSettings のプロパティ

Property	Type	Description
dataSource	any[]	データを含む JSON 配列または DataManager インスタンス
type	'JSON' | 'CSV'	データソースの種類（既定値：'JSON'）
rows	IField[]	行軸に表示するフィールド
columns	IField[]	列軸に表示するフィールド
values	IField[]	集計する値／メジャーのフィールド
filters	IField[]	フィルター軸に表示するフィールド
expandAll	boolean	すべての行／列グループを最初に展開します
drilledMembers	IDrilledMember[]	ドリル済みのメンバー：[{ name: 'Country', items: ['France'] }]
filterSettings	IFilter[]	適用するメンバー／ラベル／値フィルター
sortSettings	ISort[]	フィールドの並べ替えルール
formatSettings	IFormatSettings[]	数値の書式設定：[{ name: 'Amount', format: 'C0' }]
calculatedFieldSettings	ICalculatedFieldSettings[]	計算フィールドの数式

主なメソッド

// Export methods
excelExport()                          // Export pivot to Excel (.xlsx)
pdfExport()                            // Export pivot to PDF
csvExport()                            // Export pivot to CSV

// Dialog methods
createCalculatedFieldDialog()          // Show calculated field creation dialog
showConditionalFormattingDialog()      // Open conditional formatting dialog
createDrillThroughDialog()             // Show drill-through data dialog

// Data manipulation
refresh()                              // Refresh pivot with current settings
setProperties({...})                   // Update properties dynamically

// Data retrieval
getFieldList()                         // Get all available fields from data source
getDataSourceSettings()                // Get current dataSourceSettings configuration

// Persistence
getPersistData()                       // Get serialized pivot state
loadPersistData(data)                  // Restore pivot state

---

イベント

PivotViewComponent のドキュメントにあるすべてのイベントを以下に示します。Vue の :eventName="handler" 構文を使用してバインドします。

データ操作イベント

Event	Parameters	Triggered When
actionBegin	dataSourceSettings, actionName, fieldInfo, cancel	ピボット操作（フィルタリング、並べ替え、集計、計算フィールド）の実行前
actionComplete	dataSourceSettings, actionName, fieldInfo, actionInfo	ピボット操作が正常に完了した後
actionFailure	actionName, errorInfo	ピボット操作が失敗した場合、またはエラーが発生した場合

一般的な actionName の値：

• "Aggregate field" - 集計の種類が選択されたとき
• "Field filtered" - メンバー／ラベル／値フィルターが適用されたとき
• "Field sorted" - UI からフィールドが並べ替えられたとき
• "Edit pivot table" - ピボット内のセルが編集されたとき
• "Remove field" / "Add field" - グループ化バーからフィールドが削除／追加されたとき

セル操作イベント

Event	Parameters	Triggered When
aggregateCellInfo	rowHeaders, columnHeaders, value, valueField, aggregateType	各値セルの描画時（値の上書きや書式設定のスキップに使用）
cellClick	セルの座標、メンバー情報	ユーザーがピボットセルをクリックしたとき
cellDoubleClick	セルの座標、メンバー情報	ユーザーがピボットセルをダブルクリックしたとき

フィールド設定イベント

Event	Parameters	Triggered When
calculatedFieldCreate	calculatedField, calculatedFieldSettings, fieldName, dataSourceSettings, cancel	ユーザーがダイアログで計算フィールドを作成／編集したとき

エクスポートイベント

Event	Parameters	Triggered When
beforeExcelExport	dataSourceSettings, isCollapsedStateSaved	Excel エクスポートの開始前
excelExportComplete	エクスポート結果データ	Excel エクスポートの完了後
beforePdfExport	dataSourceSettings, isCollapsedStateSaved	PDF エクスポートの開始前
pdfExportComplete	エクスポート結果データ	PDF エクスポートの完了後
beforePrint	dataSourceSettings	印刷の開始前
printComplete	印刷結果	印刷の完了後

ドリルおよび展開イベント

Event	Parameters	Triggered When
drillThrough	行／列のヘッダー、生データのレコード	ユーザーがドリルスルー操作を開始したとき
beginDrillThrough	セルのコンテキスト、メンバー情報	ドリルスルー操作の開始前（実行を防ぐには args.cancel = true を設定します）

フィールド設定とグループ化バーのイベント

イベント	パラメーター	発生するタイミング
fieldDrop	ドロップされるフィールド、移動先の軸（rows/columns/values/filters）	フィールドをグループ化バーにドロップして追加したとき
fieldDragStart	ドラッグされるフィールド、ドラッグ元の軸	グループ化バーからフィールドのドラッグを開始したとき
fieldRemove	削除されるフィールド、移動元の軸	グループ化バーからフィールドを削除したとき
onFieldDropped	ドロップされたフィールド、移動先の軸	フィールドのドロップに成功した後（fieldDropと似ていますが、ドロップ後に発生します）
aggregateMenuOpen	フィールド、現在の集計タイプ	グループ化バー／フィールドリストで集計タイプのドロップダウンを開いたとき

エクスポートのカスタマイズイベント

イベント	パラメーター	発生するタイミング
excelQueryCellInfo	セルデータ、行／列情報、セルタイプ	Excel エクスポート中の各セル（セルのスタイル、値、書式をカスタマイズ）
excelHeaderQueryCellInfo	ヘッダーセル情報、行／列の階層	Excel エクスポートの各ヘッダーセル（ヘッダーのスタイルをカスタマイズ）
pdfQueryCellInfo	セルデータ、行／列情報、pdfCell	PDF エクスポート中の各セル（PDF セルの表示をカスタマイズ）
headerCellInfo	ヘッダーセルのコンテキスト、スタイル情報	UI で各ヘッダーセルを描画するとき（ヘッダーの表示をカスタマイズ）
queryCellInfo	値セルのデータ、スタイル、aggregateType	UI で各値セルを描画するとき（セルの表示、値、書式をカスタマイズ）

イベントの使用例：

<template>
  <ejs-pivotview 
    :dataSourceSettings="dataSourceSettings"
    @actionBegin="onActionBegin"
    @actionComplete="onActionComplete"
    @aggregateCellInfo="onAggregateCellInfo">
  </ejs-pivotview>
</template>

<script setup>
const onActionBegin = (args) => {
  if (args.actionName === 'Aggregate field') {
    console.log('User changing aggregation for:', args.fieldInfo.name);
    // Set args.cancel = true to prevent action
  }
};

const onActionComplete = (args) => {
  if (args.actionName === 'Field filtered') {
    console.log('Filter applied successfully');
  }
};

const onAggregateCellInfo = (args) => {
  // Override cell value: args.value = customValue;
  // Skip formatting: args.isFormatted = false;
};
</script>

---

はじめに

📄 参照： references/getting-started.md

• インストール手順と依存関係
• 基本的な PivotView の設定
• 設定の基礎
• CSS のインポートとテーマ設定 — Tailwind 3 の単一インポートテーマパッケージ（@syncfusion/ej2-tailwind3-theme）を含みます
• テーマの適用方法 — npm テーマパッケージ、CDN、CRG、Theme Studio
• Vue 2 および Vue 3 との互換性
• フィールドリストコンポーネント - 動的なフィールド設定用の UI
• グループ化バーコンポーネント - インラインでのフィールド整理とドラッグ＆ドロップ
• 読み込み状態とインジケーター - データ読み込み中の UI フィードバックを管理
• アクセシビリティの基礎 - WCAG 準拠、キーボード操作、スクリーンリーダー

---

データバインディングとデータソース

JSON データバインディング

📄 参照： references/data-binding.md

• ローカル JSON データのバインド
• JsonAdaptor による DataManager の使用
• ファイルのアップロードと JSON の読み込み
• ローカルとリモートのデータアプローチ
• サーバーサイドのピボット処理 - 大規模データセット向けのバックエンド集計
• 複雑なデータバインディングパターン - 複数のデータソース、リアルタイム更新、遅延読み込み

外部データソース

📄 参照： references/connecting-to-data-source.md

• MySQL データベース接続
• SQL Server との統合
• MongoDB への接続
• PostgreSQL、Oracle、Elasticsearch、Snowflake
• データ取得用 Web API コントローラーの作成

OLAP（Analysis Services）

📄 参照： references/olap.md

• SQL Server Analysis Services（SSAS）の設定
• OLAP フィールドの命名規則 [Dimension].[Hierarchy]
• 多次元分析のための SSAS キューブへの接続
• 大規模データセット（数百万行）の処理
• OLAP と JSON バインディングの比較
• OLAP 階層を使ったドリルダウン

---

データ操作と書式設定

データの書式設定

📄 参照： references/data-formatting.md

• 数値の書式設定（通貨、パーセンテージ、小数）
• 日付と時刻の値の書式設定
• カスタム書式パターン
• 書式設定の構成
• 国際化とローカライズ - 多言語対応、RTL、地域別の書式設定
• アクセシブルなスタイル設定 - ハイコントラスト、色覚多様性への配慮、フォントサイズ

条件付き書式

📄 参照： references/conditional-formatting.md

• 条件付き書式機能を有効にする
• 条件と演算子を使用して書式ルールを定義する
• セルの値に基づいてスタイルを適用する（backgroundColor、color、fontFamily など）
• dataSourceSettings でルールを事前定義する
• ツールバーから条件付き書式ダイアログを表示する
• ルールの動的な変更と効果

データ整形とフィールド設定

📄 参照： references/data-shaping.md

• 行、列、値を定義する
• フィールドの階層とネスト
• キャプションとフィールドの整理
• 展開／折りたたみの動作
• 設定のベストプラクティス

行と列のプロパティ

📄 参照： references/row-and-column.md

• 幅と高さを設定する（ピクセル、パーセンテージ、自動）
• 行の高さをカスタマイズする
• 列幅を設定する
• レスポンシブなサイズ設定
• 最小幅を保証する

合計の表示／非表示

📄 参照： references/show-hide-totals.md

• 総計の表示を制御する
• 小計の位置と表示を設定する
• 集計行を設定する
• 条件に応じて合計を表示する

---

データ分析とピボット操作

データのフィルタリング

📄 参照： references/filtering.md

• メンバーのフィルタリング（特定のメンバーを含める／除外する、すべて選択する、検索する、並べ替える）
• ラベルのフィルタリング（文字列、数値、日付に対する「次を含む」「次で始まる」「次で終わる」「次の範囲内」など）
• 値のフィルタリング（集計値の範囲によるフィルタリング。上位 N 件と下位 N 件を含む）
• filterSettings によるプログラムからのフィルター設定
• フィルターダイアログの UI 機能（検索、すべて選択、並べ替え、現在の選択内容をフィルターに追加）
• OLAP 固有のオプション：loadOnDemandInMemberEditor と levelCount
• maxNodeLimitInMemberEditor を使用した大規模データセットのフィルター最適化
• フィルター関連のイベント：memberFiltering、memberEditorOpen、actionBegin、actionComplete、actionFailure

フィールドと値の並べ替え

📄 参照： references/sorting.md

• メンバーの並べ替え（昇順／降順）
• 値の並べ替え（集計値による並べ替え）
• カスタム並べ替え（ユーザー定義のメンバー順）
• 英数字の並べ替え（数値順とアルファベット順）
• 並べ替え設定
• 複雑な階層での複数レベルの並べ替え

集計と計算フィールド

📄 参照： references/aggregation-and-calculated-fields.md

• 集計の種類（合計、平均、件数、最小、最大など）
• パーセンテージ集計（合計に対する割合、行に対する割合、親に対する割合など）
• 比較集計（差分、差分率）
• 累計と累計に対する割合（累計に対する累積割合。クライアント側エンジンのみ）
• 集計ドロップダウンのカスタマイズ
• UI をすっきりさせるための集計ラベルの非表示
• 計算フィールドとカスタム数式

データのグループ化

📄 参照： references/grouping.md

• 数値のグループ化（1～5、6～10 などの範囲）
• 日付のグループ化（年、四半期、月、週、日）
• カスタムグループ化（業務固有のカテゴリ）
• プログラムからのグループ化設定
• 同じピボット内で複数の種類をグループ化する
• グループ化 UI での操作とグループ解除機能

セルデータの編集

📄 参照： references/editing.md

• セル編集モード（通常、ダイアログ、バッチ、コマンド列）
• CRUD 操作（作成、読み取り、更新、削除）
• 編集設定
• 安全のための確認ダイアログ
• 編集イベントと検証
• バッチモードによる一括編集
• データグリッドエディターの設定 - グリッドの動作、選択、パフォーマンス、ページネーション

---

ドリルダウンとナビゲーション

ドリルダウンとドリルアップ

📄 参照： references/drill-down-up.md

• 階層データを展開／折りたたむ
• ドリル位置と特定メンバーのドリル
• expandAll プロパティの設定
• 特定のフィールドのみを展開する
• ドリル対象からメンバーを除外する
• 位置を考慮したドリル

レポートの操作

📄 参照： references/report-manipulation.md

• レポートの動的な変更
• フィールドリストの操作
• グループ化バーの操作
• レポートの更新と再読み込み
• 定義済みレポートの読み込み - レポートテンプレート、サーバー側テンプレート、初期レポートの読み込み

ハイパーリンク

📄 参照： references/hyperlink.md

• セルでハイパーリンクを有効にする
• ハイパーリンク設定の構成
• 行ヘッダーのハイパーリンク
• 列ヘッダーのハイパーリンク
• 値セルのハイパーリンク
• 集計セルのハイパーリンク
• 条件付きハイパーリンクのルール
• カスタム CSS スタイル

---

視覚化とレイアウト

クラシック／表形式レイアウト

📄 参照： references/classic-layout.md

• 表形式レイアウトの利点と設定
• 行フィールドの横並び表示
• 総計の配置
• 小計の配置
• レイアウトの構成（gridSettings.layout）
• 制限事項と互換性に関する注意事項

ピボットチャートの統合

📄 参照： references/pivot-chart.md

• ピボットチャートの設定と表示モード
• 21 種類以上のチャートタイプ（折れ線、縦棒、面、横棒、バブル、散布図など）
• 表示オプション（グリッドのみ、チャートのみ、両方）
• 優先表示の選択
• チャートのカスタマイズ（系列、軸、凡例）
• チャートでのドリルダウン

ツールチップの設定

📄 参照： references/tooltip.md

• showTooltip プロパティでツールチップを有効／無効にする
• HTML と動的プレースホルダーを使ったカスタムツールチップテンプレート
• テンプレートのプレースホルダー：${rowHeaders}、${columnHeaders}、${valueField}、${aggregateType}、${value}
• CSS スタイルを使った基本および応用テンプレートの例
• chartSettings.tooltip によるチャート固有のツールチップ
• ツールチップの配置とモバイルでの考慮事項
• アクセシビリティのベストプラクティスとキーボード操作のサポート

---

エクスポートとツールバー

Excel と PDF へのエクスポート

📄 参照： references/export.md

• Excel エクスポート（.xlsx 形式）
• CSV エクスポート機能
• PDF エクスポート機能
• エクスポートメソッドの呼び出し
• ツールバーのエクスポートオプション
• エクスポート時のデータ保持

ツールバーとレポート管理

📄 参照： references/toolbar.md

• showToolbar プロパティでツールバーを有効にする
• ツールバー項目の配列を設定する（New、Save、SaveAs、Load、Rename、Remove、Grid、Chart、Export、ConditionalFormatting など）
• レポートのライフサイクルコールバック：saveReport()、loadReport()、renameReport()、removeReport()
• 保存済みレポートを取得する fetchReport()
• カスタムツールバー項目とスタイル
• レポートデータの永続化と取得
• サイズとレイアウトの設定 - コンポーネントの寸法、レスポンシブ動作、コンテナのサイズ設定

---

状態とパフォーマンス

状態の永続化

📄 参照： references/state-persistence.md

• 永続化を有効にする（enablePersistence）
• ローカルストレージへの状態の自動保存
• セッションをまたいだレイアウトの保持
• ピボットレイアウトのプログラムによる保存と読み込み
• getPersistData() および loadPersistData() メソッド
• カスタムの永続化ワークフロー

パフォーマンスのベストプラクティス

📄 参照： references/performance.md

• 大規模なデータセット向けの仮想スクロール
• ページングの実装
• サーバー側ピボットエンジン
• データ圧縮の手法
• レイアウト更新の遅延機能
• 並べ替えの最適化
• メンバーのフィルタリングのパフォーマンス
• グループ化の影響と代替手段

---

クイックスタートの例

<template>
  <div id="app">
    <ejs-pivotview
      :dataSourceSettings="dataSourceSettings"
      :height="height"
      :width="width"
      :gridSettings="gridSettings"
      :showFieldList="showFieldList">
    </ejs-pivotview>
  </div>
</template>

<script setup>
import { PivotViewComponent as EjsPivotview, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
import { provide } from "vue";

const dataSourceSettings = {
  dataSource: pivotData,
  expandAll: false,
  columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
  rows: [{ name: 'Country' }, { name: 'Products' }],
  values: [
    { name: 'Sold', caption: 'Units Sold' },
    { name: 'Amount', caption: 'Sold Amount' }
  ],
  formatSettings: [{ name: 'Amount', format: 'C0' }],
  filters: []
};

const height = '450px';
const width = '100%';
const showFieldList = true;
const gridSettings = { columnWidth: 120, layout: 'Compact' };

provide('pivotview', [FieldList]);
</script>

<style>
/* Tailwind 3 theme package — single import covers all Pivot Table dependencies */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css";
</style>

---

よくあるパターン

パターン 1：集計分析

rows、columns、values を定義して、データの集計サマリーを作成します。

パターン 2：ドリルダウンによる探索

expandAll: false とドリルダウンアイコンを使って、ユーザーが階層データを探索できるようにします。

パターン 3：複数ソースの分析

dataSourceSettings.type を使って、異なるデータソース（JSON、OLAP、リレーショナルデータベース）をバインドします。

パターン 4：視覚的な表現

displayOption: { view: 'Chart' } を指定してピボットチャートを有効にし、グラフィカルな洞察を得ます。

パターン 5：大規模データセットの処理

virtualScrolling: true、allowPaging: true、またはサーバー側エンジンを組み合わせて、パフォーマンスを向上させます。

---

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

プロパティ	型	目的
dataSourceSettings	Object	データソース、フィールド、集計ルールを定義します
gridSettings	Object	レイアウト、寸法、グリッドの動作を制御します
displayOption	Object	グリッドとチャートの表示を制御します
chartSettings	Object	チャートの種類と外観を設定します
hyperlinkSettings	Object	ハイパーリンクを有効にし、設定します
allowExcelExport	Boolean	Excel エクスポート機能を有効にします
allowPaging	Boolean	大規模データセットのページングを有効にします
enableVirtualization	Boolean	仮想スクロールを有効にします
enablePersistence	Boolean	コンポーネントの状態をローカルストレージに保持します
showFieldList	Boolean	フィールドリスト UI を表示します
showGroupingBar	Boolean	グループ化バー UI を表示します

---

各リファレンスを読むタイミング

• PivotView を設定するには？ → getting-started.md
• データをバインドするには？ → data-binding.md または connecting-to-data-source.md
• フィールドやレイアウトを設定するには？ → data-shaping.md、row-and-column.md
• ドリルダウンを追加するには？ → drill-down-up.md、report-manipulation.md
• チャートを表示するには？ → pivot-chart.md
• ハイパーリンクを追加するには？ → hyperlink.md
• データをエクスポートするには？ → export.md、toolbar.md
• 状態を保存するには？ → state-persistence.md
• パフォーマンスを最適化するには？ → performance.md

---

次のステップ

1. getting-started.md を参考に、最初の PivotView を設定します
2. data-binding.md または connecting-to-data-source.md を使用してデータをバインドします
3. data-shaping.md でフィールドとレイアウトを設定します
4. 該当するリファレンスガイドを使用して、外観と動作をカスタマイズします
5. 必要に応じて、エクスポート機能と永続化機能を実装します
6. performance.md を使用して、大規模データセットのパフォーマンスを最適化します