mcpField
S
syncfusion-angular-pivot-table

syncfusion-angular-pivot-table

github.com/syncfusion開発0313 回インストール1 週間前に更新
リポジトリ

syncfusion-angular-pivot-table について

多次元データ分析向けの Syncfusion Angular Pivot Grid を構築するためのスキルガイドです。集計、グループ化、チャート、フィルタリング、編集、エクスポートに加え、データソースの検証と確認済みリファレンスの参照方法を説明します。

主な機能

  1. 01多次元データの集計とグループ化
  2. 02計算フィールドとフィルターの作成
  3. 03ピボットチャートの統合
  4. 04データ書式と条件付きスタイル
  5. 05レコード編集とデータのドリル操作
  6. 06Excel、PDF、CSV へのエクスポート

活用シーン

  1. 01リレーショナルデータや OLAP データの分析
  2. 02グループ化した集計値の比較
  3. 03ドリルスルーによる元レコードの確認
  4. 04共有用のピボットレポートのエクスポート

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-pivot-table

インストール後、Claude Code で/syncfusion-angular-pivot-tableを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
aggregation.md
calculated-field.md
core-concepts.md
data-formatting.md
database-connections.md
drill-down.md
editing-drill-operations.md
export-and-print.md
field-list.md
filtering-and-sorting.md
getting-started.md
grouping-bar-ui-operations.md
grouping.md
layout-and-columns.md
olap-data-sources.md
paging-configuration.md
performance-optimization.md
pivot-chart-integration.md
server-side-pivot-engine.md
state-persistence-hyperlinks.md
tooltips-customization.md
ui-customization.md
virtual-scrolling.md

詳細

Angular ピボットグリッドの実装

Syncfusion Angular 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 を使用する

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

次のような要件がある場合に、このスキルを使用してください:

  • 多次元データからピボットテーブルを作成して設定する
  • OLAP またはリレーショナルデータソースからデータをバインドする
  • 複数の集計関数(Sum、Avg、Count など)でデータを集計する
  • 数値範囲、日付、またはカスタムカテゴリでデータをグループ化する
  • 数式を使った計算フィールドを作成して管理する
  • ドリルダウンおよびドリルスルー操作を有効にする
  • 統合されたピボットチャートでデータを可視化する
  • カスタム書式設定と条件付きスタイルを適用する
  • 大規模なデータセットのパフォーマンスを最適化する
  • ピボットグリッドのデータを Excel または PDF にエクスポートする
  • ピボットグリッドの状態を保存して復元する
  • フィールドリスト、グループ化バー、ツールバーで UI をカスタマイズする

ドキュメントガイド

はじめに

📄 参照: references/getting-started.md

  • インストールとパッケージの設定(Angular 21 のスタンドアロンアーキテクチャ)
  • Angular Pivot Grid の基本的な実装
  • テーマパッケージ — 統合された @syncfusion/ej2-{theme}-theme パッケージ(例:ej2-material3-theme)を使用し、styles/pivotview/index.css を 1 つだけインポートします
  • CSS のインポートとテーマの設定
  • コンポーネントの初期化(PivotViewModule、bootstrapApplication)
集計

📄 参照: references/aggregation.md

  • 集計関数:Sum、Avg、Count、Min、Max、Product、Median、DistinctCount
  • 高度な集計:DifferenceFrom、PercentageOfDifferenceFrom、PercentageOfParentTotal
  • 親合計の集計:PercentageOfParentColumnTotal、PercentageOfParentRowTotal(軸単位の親に対する割合)
  • 累計の集計:RunningTotals と PercentageOfRunningTotals(総計に対する累積割合。クライアント側のみ)
  • baseField および baseItem プロパティを使用した基準フィールドの設定
  • 同じフィールドに対する複数の集計
  • 集計ドロップダウンと UI のカスタマイズ
  • 実行時の集計タイプの変更
  • イベント:aggregateCellInfo、actionBegin、actionComplete、actionFailure
グループ化

📄 参照: references/grouping.md

  • allowGrouping: true を設定し、GroupingService を注入してグループ化を有効にします
  • 数値のグループ化:rangeInterval、startingAt、endingAt で範囲を設定します
  • 日付のグループ化:年、四半期、月、日、時間、分、秒単位で整理します
  • カスタムグループ化:業務で定義したカテゴリごとにデータをグループ化します
  • コンテキストメニューからの UI ベースのグループ化
  • グループ解除とプログラムによるグループ解除
  • 一般的なグループ化パターンとトラブルシューティング
計算フィールド

📄 参照: references/calculated-field.md

  • 計算フィールドを対話的またはプログラムで作成します
  • allowCalculatedField: true を設定し、CalculatedFieldService を注入して有効にします
  • calculatedFieldSettings(name、formula)で定義します
  • type: 'CalculatedField' を指定して values 配列に追加します
  • UI(Field List、Grouping Bar)からフィールドを編集・名前変更します
  • 数式の構文:演算子(+、-、、/、^、<、>、==、!=、&、|、?)、関数(abs、min、max、isNaN、Math.)
  • 数式内の集計関数:Sum、Count、Avg、Min、Max
  • 別個の formatSettings 配列で書式設定します:通貨(C)、数値(N)、パーセンテージ(P)
  • イベント:calculatedFieldCreate(検証)、actionBegin/actionComplete(操作の制御)
ピボットチャートの統合

📄 参照: references/pivot-chart-integration.md

  • PivotChartService プロバイダーを注入して、チャート機能を有効にします
  • チャートの種類:Line、Column、Area、Bar、StepArea、Pie、Doughnut、Funnel、Pyramid、Radar、Polar、Pareto、Bubble、Scatter、Spline など 21 種類以上
  • 表示オプション:displayOption プロパティで view と primary の設定を指定し、Table、Chart、または Both を表示します
  • 系列のカスタマイズ:chartSettings の chartSeries(type、marker、dataLabel)でチャートをカスタマイズします
  • フィールドリストとの統合:showFieldList: true を設定して、フィールドを動的に操作できるようにします
  • グループ化バーのサポート:showGroupingBar: true を設定して、軸フィールドを切り替えられるようにします
  • 軸の設定:chartSettings の primaryXAxis と primaryYAxis で X/Y 軸をカスタマイズします
  • 複数軸:multipleAxisMode とともに enableMultipleAxis を設定して、複数の値を可視化します
  • 集積チャートのドリル操作:コンテキストメニューから Pie、Doughnut、Funnel、Pyramid のドリルダウン/ドリルアップをサポートします
フィルタリングと並べ替え

📄 参照: references/filtering-and-sorting.md

  • メンバーのフィルタリング:特定のフィールドメンバーを含める、または除外します(OLAP では「含める/除外する」と levelCount を使用)
  • 現在の選択をフィルターに追加:選択内容を置き換えるのではなく、メンバーエディターで選択内容を蓄積します
  • メンバーエディターの UX:すべて選択/選択解除、メンバーの検索、エディター内でのメンバーの並べ替え
  • 表示するメンバー数の制限:大規模な階層では maxNodeLimitInMemberEditor を調整します
  • OLAP メンバーの読み込み:loadOnDemandInMemberEditor と levelCount によるオンデマンド読み込み
  • ラベルのフィルタリング:ヘッダーテキストを文字列(Equals、Contains、BeginWith、Between、...)、数値、または日付でフィルタリングします
  • 値のフィルタリング:演算子(Equals、GreaterThan、Between、...)および 上位/下位 N 件のメンバーを使って、集計値でフィルタリングします
  • フィルタリングイベント:memberFiltering、memberEditorOpen、actionBegin/actionComplete/actionFailure
  • メンバーの並べ替え:フィールドメンバーを昇順/降順に並べ替えます
  • カスタムメンバーの並べ替え:membersOrder を使って、フィールドメンバーをユーザー定義の順序で並べ替えます
  • 値の並べ替え:enableValueSorting を使って、ピボットテーブルの値と集計データを並べ替えます
  • プログラムによる値の並べ替え:valueSortSettings で設定します
データの書式設定と条件付き書式設定

📄 参照: references/data-formatting.md

  • 数値の書式設定:通貨(C)、パーセンテージ(P)、数値(N)、科学(E)形式を適用します
  • カスタム書式文字列:計算フィールド用のプレースホルダーを含む書式文字列を定義します
  • 条件付き書式設定:conditionalFormatSettings を使って、セルの値に基づいて色やスタイルを適用します
  • 書式設定の構成:dataSourceSettings 内の個別の formatSettings 配列で設定します
エクスポートと印刷

📄 参照: references/export-and-print.md

  • Excel エクスポート:カスタムプロパティやテーマを指定した excelExport()
  • PDF エクスポート:ヘッダー、フッター、ページの向きを指定した pdfExport()
  • CSV エクスポート:大規模なデータセット(100 万行以上)向けの csvExport()
  • 印刷機能:テーブルとチャート用の print() メソッド
  • 複数テーブルのエクスポート:複数のピボットテーブルを 1 つのファイルにまとめます
  • エクスポートのカスタマイズ:セルのスタイル、カラーテーマ、ブランド設定
UI のカスタマイズ

📄 参照: references/ui-customization.md

  • ツールバーの設定:組み込みのツールバー項目を表示/非表示にします
  • レポート管理:レポートの新規作成、保存、読み込み、削除
  • ビューの切り替え:グリッドモードとチャートモードを切り替えます
  • エクスポートオプション:クイックエクスポートボタン
  • 総計/小計:表示/非表示の切り替えと配置のカスタマイズ
  • カスタムテンプレート:カスタムのツールバーまたはフィールドリストを作成します
グループ化バーの UI 操作

📄 参照: references/grouping-bar-ui-operations.md

  • グループ化バーの有効化:コンポーネントに showGroupingBar: true を設定します
  • ドラッグ&ドロップによる再編成:行、列、値、フィルターの各軸間でフィールドを移動します
  • フィルター操作:グループ化バーのフィールドボタンからフィルターにアクセスします
  • 並べ替え操作:グループ化バーのインターフェイスで並べ替えオプションを設定します
  • 削除操作:グループ化バーからフィールドを直接削除します
  • 値フィールドの管理:積み上げチャートで値フィールドを切り替えます
  • 特定のアイコンを非表示:フィールドごとにフィルター、並べ替え、削除の各アイコンの表示を制御します
  • グループ化バーのカスタマイズ:groupingBarSettings で設定します
ツールチップのカスタマイズ

📄 参照: references/tooltips-customization.md

  • ツールチップの有効化/無効化:セルとチャートでのツールチップの表示を設定します
  • カスタムツールチップテンプレート:プレースホルダーを使って動的なツールチップの内容を定義します
  • 使用可能なプレースホルダー:行ヘッダー、列ヘッダー、値、その他のセルメタデータ
  • ピボットチャートのツールチップのカスタマイズ:チャートのデータポイントに表示するツールチップの外観をカスタマイズします
  • CSS によるスタイル設定:カスタム CSS でツールチップの外観を整えます
  • 動的なツールチップの内容:セルの値とコンテキストに基づいて設定します
編集とドリル操作

📄 参照: references/editing-drill-operations.md

  • 編集を有効にする:コンポーネントに allowEditing: true を設定します(リレーショナルデータのみ)
  • 編集モード:通常(インライン)、ダイアログ(ポップアップ)、バッチ(複数)、コマンド列(専用)
  • 編集設定:allowAdding、allowDeleting、allowCommandColumns を指定して editSettings で構成します
  • 編集イベント:editCompleted、actionBegin、actionComplete、actionFailure を監視します
  • CRUD 操作:編集インターフェースからレコードを作成、読み取り、更新、削除します
  • ドリルスルー操作:コンテキストメニューから集計値の元データを表示します
  • ドリルダウン操作:セルをクリックして階層データをさらに掘り下げます
  • セル選択:selectionSettings で構成します
  • データの保存:更新されたレコードは、イベントハンドラーとデータバインディングを通じて保持されます
OLAP データソース

📄 参照: references/olap-data-sources.md

  • 接続の構成:dataSourceSettings に url、catalog、cube、providerType: 'SSAS' を設定します
  • OLAP キューブの要素:メジャー(数値の集計)、ディメンション(階層グループ化)、階層、名前付きセット
  • MDX のサポート:クエリには MDX(多次元式)構文を使用して構成します
  • 階層:[Dimension].[Hierarchy] 表記(例:[Date].[Date Hierarchy])でアクセスします
  • 計算フィールド:OLAP キューブに計算メジャーと計算ディメンションを作成します
  • 認証:接続文字列またはバックエンドの認証ヘッダーで構成します
  • 名前付きセット:分析用に事前定義されたメンバーグループです
  • 高度な機能:OLAP でのドリルダウン、仮想スクロール、値のフィルタリング
ページングの構成

📄 参照: references/paging-configuration.md

  • enablePaging: true を設定し、PagerService を注入してページングを有効にします
  • ページ設定:rowPageSize、columnPageSize、currentRowPage、currentColumnPage
  • ページャー UI の構成と配置(上部/下部)
  • 行ページングと列ページング
  • コンパクト表示と逆順ページャーレイアウト
  • ドロップダウンでのカスタムページサイズオプション
  • 最適化のための仮想スクロールとの併用
  • 巨大なデータセット向けのサーバーサイドページング
  • モバイル向けに最適化されたページング
仮想スクロール

📄 参照: references/virtual-scrolling.md

  • 大規模なデータセットでは enableVirtualization: true を設定して仮想スクロールを有効にします
  • 単一ページモード:allowSinglePage: true を使用して、現在表示中のページのみをレンダリングします
  • 制限事項:列幅にはピクセル値を使用し、実行時のサイズ変更は避けてください
  • enginePopulated イベントと update/updateView メソッドを使用して、静的な FieldList の同期を行います
  • クライアント側で 100K+ 行を処理するためのパフォーマンス最適化
ドリルダウンとドリルスルー操作

📄 参照: references/drill-down.md

  • ドリルダウン:セルをクリックして階層データを移動します
  • ドリルアップ:上位レベルに戻ります
  • ドリルスルー:集計値の元データを表示します
  • イベント:ドリル操作には cellClick、fieldDrop、fieldsUpdated を使用します
  • コンテキストメニュー:組み込みのドリル操作
データベース接続

📄 参照: references/database-connections.md

  • SQL Server:SQL 認証を使用した接続文字列で接続します
  • MySQL:ホスト、ポート、ユーザー、パスワード、データベースを指定して構成します
  • PostgreSQL:PostgreSQL データベースの接続を構成します
  • Oracle:名前付きパラメーターを使用した Oracle データベース接続
  • MongoDB:MongoDB のコレクションに接続し、ドキュメントをクエリします
  • Elasticsearch:Elasticsearch インデックスを使用したビッグデータ分析
  • Snowflake:クラウドデータウェアハウスとの統合
  • サーバーサイド処理:データベースクエリを使用する ASP.NET Core バックエンドを使用します
サーバーサイドのピボットエンジン

📄 参照: references/server-side-pivot-engine.md

  • サーバーサイド集計:負荷の高い処理を ASP.NET Core バックエンドに委任します
  • クライアント設定:dataSourceSettings で mode: 'Server' と url エンドポイントを設定します
  • ASP.NET Core のセットアップ:Syncfusion.Pivot.Engine NuGet を使用して PivotController をダウンロードし、設定します
  • データソース:サーバー上で Collection、JSON、CSV、DataTable、Dynamic オブジェクトをサポートします
  • 大規模データセット:サーバーサイド処理により 100K 行以上を処理します
  • 仮想スクロール:最適なパフォーマンスを得るため、サーバーモードと組み合わせます
  • エクスポート操作:サーバーで処理されたデータを Excel/CSV にエクスポートします
  • 認証:beforeServiceInvoke イベントまたはヘッダーで設定します
パフォーマンスの最適化

📄 参照: references/performance-optimization.md

  • 仮想スクロール:100K 行以上の場合は enableVirtualization: true を有効にします
  • 単一ページモード:パフォーマンスを向上させるには allowSinglePage: true を使用します
  • ページング:行/列のページネーションには pageSettings を設定します
  • データ圧縮:重複レコードを要約するには allowDataCompression: true を有効にします
  • 更新の遅延:フィールド操作をまとめるには allowDeferLayoutUpdate: true を使用します
  • 大規模データセットの処理:mode: 'Server' によるサーバーサイド処理
  • ベストプラクティス:事前フィルタリング、最適化された並べ替え、メンバーのフィルタリング上限、組み込みのグループ化を避けること
状態の永続化とハイパーリンク

📄 参照: references/state-persistence-hyperlinks.md

  • 状態の永続化:getPersistData() を使用してピボットの設定を保存・復元します
  • ローカルストレージ:ブラウザーの localStorage にレポートの状態を保存し、ユーザーセッションをまたいで保持します
  • レポート管理:名前付きレポートを保存、読み込み、削除します
  • JSON シリアル化:レポートの設定を JSON としてエクスポート/インポートします
  • ハイパーリンク:hyperlinkSettings を使用してピボットセル内のクリック可能なハイパーリンクを有効にします
  • ハイパーリンクイベント:適切なイベントハンドラーでハイパーリンクのクリックを処理します
  • ドリルスルーハイパーリンク:集計データの詳細データソースへのリンク

クイックスタートの例

import { PivotViewAllModule, CalculatedFieldService } from '@syncfusion/ej2-angular-pivotview';
import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotViewComponent, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
  imports: [PivotViewAllModule],
  providers: [CalculatedFieldService],
  standalone: true,
  selector: 'app-pivot-grid',
  template: `
    <ejs-pivotview #pivotview id='PivotView' 
      [dataSourceSettings]="dataSourceSettings"
      [height]="'500px'"
      [width]="'100%'"
      [allowCalculatedField]="true" 
      [allowGrouping]="true"
      [toolbar]="toolbarItems">
    </ejs-pivotview>
  `
})
export class AppComponent implements OnInit {
    @ViewChild('pivotview') pivotViewComponent!: PivotViewComponent;
    
    public pivotData!: IDataSet[];
    public dataSourceSettings!: DataSourceSettingsModel;
    public toolbarItems: string[] = ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', 'Export'];

    ngOnInit(): void {
        this.pivotData = [
            { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
            { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
            { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
            { 'Sold': 25, 'Amount': 42500, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
            { 'Sold': 40, 'Amount': 68000, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' }
        ];

        this.dataSourceSettings = {
            dataSource: this.pivotData,
            expandAll: false,
            rows: [{ name: 'Country' }, { name: 'Products' }],
            columns: [{ name: 'Year' }, { name: 'Quarter' }],
            values: [
                { name: 'AvgAmount', type: 'CalculatedField' },
                { name: 'Sold', type: 'Count' }
            ],
            calculatedFieldSettings: [
                {
                    name: 'AvgAmount',
                    formula: '"Sum(Amount)"/"Count(Sold)"'  // Calculated field: Average
                }
            ],
            formatSettings: [
                { name: 'Amount', format: 'C2' },             // Currency format
                { name: 'AvgAmount', format: 'C2' }           // Format calculated field
            ]
        };
    }
}

よく使われるパターン

パターン 1:異なる集計タイプを持つ複数のフィールド

各フィールドで使用できる集計タイプは 1 つだけです。異なる側面を分析するには、それぞれの集計関数を使用して別々のフィールドを設定します。

values: [
    { name: 'Amount', type: 'Sum' },      // Total sales amount
    { name: 'Quantity', type: 'Avg' },    // Average quantity sold
    { name: 'Sold', type: 'Count' },      // Number of transactions
    { name: 'Price', type: 'Min' },       // Minimum price
]

注: values 配列内の各フィールドで設定できるタイプは 1 つだけです。複数の集計タイプで分析するには、別々のフィールドを使用するか、集計を組み合わせた計算フィールドを作成します。

パターン 2:階層的なグループ化

複数レベルのグループ化でデータを整理します。

rows: [
    { name: 'Country' },    // Primary level
    { name: 'Region' },     // Secondary level
    { name: 'City' }        // Tertiary level
],
columns: [
    { name: 'Year' },       // Year level
    { name: 'Quarter' }     // Quarter level
]
パターン 3:集計を使用した計算フィールド

高度な分析のために、計算フィールドを複数の集計タイプと組み合わせます。

values: [
    { name: 'Amount', type: 'Sum' },       // Total amount
    { name: 'Quantity', type: 'Avg' },     // Average quantity
    { name: 'AvgRevenue', type: 'CalculatedField' }  // Custom calculation
],
calculatedFieldSettings: [
    {
        name: 'AvgRevenue',
        formula: '"Sum(Amount)" / "Count(Quantity)"'  // Revenue per unit
    }
],
formatSettings: [
    { name: 'Amount', format: 'C2' },      // Currency format for Amount
    { name: 'AvgRevenue', format: 'C2' }   // Currency format for calculated field
]
パターン 4:数値範囲のグループ化

数値フィールドを範囲ごとにグループ化します。

groupSettings: [
    {
        name: 'ProductID',
        type: 'Number',
        rangeInterval: 5,
        startingAt: 1000,
        endingAt: 1010
    }
]
パターン 5:日付の階層的なグループ化

時間ベースの階層で日付を整理します。

groupSettings: [
    {
        name: 'OrderDate',
        type: 'Date',
        groupInterval: ['Years', 'Months'],  // Year then month hierarchy
        startingAt: new Date(2020, 0, 1),
        endingAt: new Date(2023, 11, 31)
    }
]

主要な設定プロパティ

プロパティ型場所目的
rowsArraydataSourceSettingsデータをグループ化するため、フィールドを縦方向に配置します
columnsArraydataSourceSettingsデータをグループ化するため、フィールドを横方向に配置します
valuesArraydataSourceSettingstype(Sum、Avg、Count、CalculatedField など)で集計するフィールドです
filtersArraydataSourceSettings両方の軸にまたがるデータのフィルタリングに使用するフィールドです
typeStringvalues field集計タイプ:Sum、Avg、Count、Min、Max、Product、DistinctCount、Median、RunningTotals、PercentageOfRunningTotals(クライアント側のみ)、DifferenceFrom、PercentageOfDifferenceFrom、PercentageOfGrandTotal、PercentageOfColumnTotal、PercentageOfRowTotal、PercentageOfParentTotal、PercentageOfParentColumnTotal、PercentageOfParentRowTotal、PopulationStDev、SampleStDev、PopulationVar、SampleVar、Index、CalculatedField
baseFieldStringvalues fieldDifferenceFrom/割合ベースの比較に使用するフィールド参照(基準フィールドの集計)です
baseItemStringvalues field基準フィールドの比較に使用する特定のメンバーです
allowCalculatedFieldBooleanComponent計算フィールド機能を有効にします(CalculatedFieldService プロバイダーが必要です)
calculatedFieldSettingsArraydataSourceSettings計算フィールドの name および formula プロパティを定義します
formulaStringcalculatedFieldSettings集計関数(Sum、Count、Avg、Min、Max)と演算子(+、-、*、/、^、<、>、==、!=、&、|、?)を使用する数式です
formatSettingsArraydataSourceSettings値フィールドおよび計算フィールドの数値形式(C、N、P、E)を指定するための独立した配列です
allowGroupingBooleanComponentグループ化機能を有効にします(GroupingService プロバイダーが必要です)
groupSettingsArraydataSourceSettingsname、type、rangeInterval、groupInterval を使用して、数値、日付、またはカスタムのグループ化を設定します
groupIntervalArraygroupSettingsグループ化の階層(Years、Quarters、Months、Days、Hours、Minutes、Seconds)です
aggregateTypesArrayComponent集計のドロップダウンに表示するタイプを制限します(AggregateTypes の配列)
showAggregationOnValueFieldBooleandataSourceSettingsグループ化バーのボタンテキストに集計タイプを表示します(例:「金額」ではなく「金額の合計」)
sortSettingsArraydataSourceSettingsorder、membersOrder、name プロパティを使用して、フィールドの並べ替えを設定します
enableValueSortingBooleanComponent集計値による並べ替えを有効にします
allowMemberFilterBooleandataSourceSettingsメンバーフィルター UI を有効または無効にします(デフォルトは true)
allowLabelFilterBooleandataSourceSettingsヘッダーテキスト、数値、日付でフィルタリングするラベルフィルター UI を有効にします
allowValueFilterBooleandataSourceSettings集計値に基づいてフィルタリングする値フィルター UI を有効にします
filterSettingsArraydataSourceSettingsname、type(Include/Exclude/Label/Number/Date/Value)、condition、value1、value2、measure、items、levelCount、selectedField を使用して、プログラムによるフィルター条件を設定します
condition(Top/Bottom)StringfilterSettings(type: 'Value')選択した measure の集計値に基づく上位/下位 N 件のメンバーです(クライアント側のみ)
maxNodeLimitInMemberEditorNumberComponent「さらに項目があります」というメッセージを表示するまでにメンバーエディターに表示するメンバーの最大数です(デフォルトは 1000)
loadOnDemandInMemberEditorBooleanComponentOLAP 専用:展開またはレベル選択されるまで、階層の最初のレベルのみを読み込みます(デフォルトは true)

重要:値に計算フィールドを追加する場合は、通常の集計と区別するために type: 'CalculatedField' を使用してください。書式設定は値フィールドオブジェクト内ではなく、別の formatSettings 配列で指定する必要があります。


次のステップ

基礎(まずはこちらから):

  1. セットアップと初期化については、Getting Startedをお読みください
  2. 集計関数と基本フィールドの集計の実装については、Aggregationをお読みください
  3. 数値、日付、カスタムのグループ化の設定については、Groupingをお読みください

データ操作: 4. 複雑な計算とカスタムフィールドの数式については、Calculated Fieldsをお読みください 5. ラベル/値によるフィルタリングとカスタムの並べ替えについては、Filtering & Sortingをお読みください 6. 数値形式と条件付き書式については、Data Formattingをお読みください

可視化とインタラクション: 7. グラフ作成とドリル操作については、Pivot Chart Integrationをお読みください 8. ツールバーとカスタムインターフェースについては、UI Customizationをお読みください 9. 階層データの探索については、Drill-Down & Drill-Throughをお読みください

高度な機能: 10. 複数形式でのエクスポート(Excel、PDF、CSV)については、Export & Printingをお読みください 11. 設定の保存と復元については、State Persistenceをお読みください 12. SQL/NoSQL/ビッグデータとの統合については、Database Connectionsをお読みください 13. バックエンドで10万行以上を処理する方法については、Server-Side Pivot Engineをお読みください 14. 大規模データセット、遅延更新、仮想スクロールについては、Performance Optimizationをお読みください


基礎リファレンス

これらのファイルでは基礎知識を説明しており、機能ガイドで参照される場合があります。

📄 references/core-concepts.md - データバインディングの種類(JSON、CSV、OLAP)、クライアントサイドとサーバーサイドの比較、適切なデータソースの選び方

📄 references/layout-and-columns.md - クラシックレイアウト、行/列のサイズ設定、列の機能、セルの選択とカスタマイズ

📄 references/field-list.md - フィールドリストのUI(ポップアップ/固定モード)、フィールドの整理、遅延更新のパターン

コメント