Blazor ピボットグリッドの概要

Ignite UI for Blazor ピボットグリッドは、クロス集計形式で大量の多次元データを合計して表すために使用されます。データの概要は、簡単かつ迅速にソート、グループ化、またはフィルタリングできます。このようなデータには、合計、平均、およびその他の統計が含まれる場合があります。エンドユーザーは、必要に応じて、ドラッグアンドドロップ操作でピボットテーブルのレイアウトを変更できます。

Blazor ピボットグリッドとは

Blazor PivotGrid は、ピボットテーブルにデータを表示し、提供されたデータセットで複雑な分析を実行するのに役立ちます。この洗練されたピボットグリッドコントロールは、後でクロス集計形式で表示される大量のデータを整理、集計、およびフィルタリングするために使用されます。Blazor ピボットグリッドの主な機能は、行のディメンション、列のディメンション、集計、およびフィルターです。

IgbPivotGrid を使用すると、ユーザーはデータを多次元のピボットテーブル構造で構成および表示できます。行と列は個別のデータグループを表し、データセルの値は集計を表します。これにより、単純なフラットデータセットに基づく複雑なデータ分析が可能になります。IgbPivotGrid は機能豊富なピボットテーブルで、さまざまなディメンションと値を簡単に構成できるだけでなく、フィルタリングやソートなどの追加のデータ操作も提供します。

Blazor ピボットグリッドの例

以下は、Blazor ピボットデータセレクターコンポーネントと組み合わせた Blazor ピボットグリッドの例です。このようにして、より柔軟なランタイム構成オプションを使用できます。

Blazor ピボットグリッドを使用した作業の開始

Blazor PivotGrid は、PivotConfiguration プロパティを介して構成できます。

<IgbPivotGrid PivotConfiguration="PivotConfiguration" Data="PivotData">
</IgbPivotGrid>

これは、rows (行)、columns (列)、values (値) の 3 つの主要なディメンションによって定義されます。rows と columns は、グリッドの行と列に表示されるグループ化された構造を定義します。values は、グループの関連する値を計算および表示するために使用される集計フィールドと集計を**定義します。

フィルターは、filters 構成プロパティを介して定義することもできます。ディメンションまたは値として追加したくないが、UI を介して関連するメンバー値をフィルタリングしたいフィールドに使用できます。

ディメンション構成

各基本ディメンション構成には、提供されたデータのフィールドに一致する MemberName が必要です。

複数の兄弟ディメンションを定義できます。これにより、関連する行または列のディメンション領域に、より複雑なネストされたグループが作成されます。

ディメンションは、ドラッグアンドドロップを使用して、対応するチップを介して、ある領域から別の領域に並べ替えたり移動したりできます。

ディメンションは、ChildLevel プロパティを介して拡張可能な階層を記述することもできます。例えば:

@code {
    var pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.Rows.Add(new IgbPivotDimension()
        {
            MemberName = "Product",
            Enabled = true,
            Name = "pivotDimension1",
            ChildLevel = new IgbPivotDimension() { MemberName = "Country", Enabled = true, Name = "pivotDimension2" }
        });
}

この場合、ディメンションはグリッドの関連セクション (行または列) にエキスパンダーを描画し、階層の一部として子を展開または縮小ことができます。デフォルトでは、行のディメンションは最初に展開されます。この動作は、ピボットグリッドの DefaultExpandState プロパティで制御できます。

事前定義されたディメンション

ピボットグリッドの一部として、構成を容易にするために、いくつかの追加の事前定義されたディメンションが公開されています:

IgbPivotDateDimension 日付フィールドに使用できます。デフォルトで次の階層を記述します:
- すべての期間
- 年
- 四半期
- 月
- 完全な日付

次のように、行または列に設定できます:

@code {
    IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
    dateDim.BaseDimension = new IgbPivotDimension()
        {
            MemberName = "Date",
            Enabled = true
        };
    _config.Rows.Add(dateDim);
}

また、階層の特定の部分を有効または無効にするために、2 番目のオプションパラメーターを介してさらにカスタマイズすることもできます。例えば:

@code {
    IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
    dateDim.BaseDimension = new IgbPivotDimension()
        {
            MemberName = "Date",
            Enabled = true
        };
    dateDim.Options = new IgbPivotDateDimensionOptions()
        {
            Years = true,
            Months = true,
            FullDate = true,
            Quarters = true
        };
    _config.Rows.Add(dateDim);
}

値の構成

値の構成には、提供されたデータのフィールドに一致するメンバーが必要です。または、より複雑なカスタムシナリオ用にカスタム aggregator 関数を定義できます。データフィールドのデータ型に応じて使用できる 4 つの事前定義された集計があります:

PivotNumericAggregate - 数値フィールド用。次の集計関数が含まれています: SUM、AVG、MIN、MAX、COUNT。
PivotDateAggregate - 日付フィールド用。次の集計関数が含まれています: LATEST、EARLIEST、COUNT。
PivotTimeAggregate - 時間フィールド用。次の集計関数が含まれています: LATEST、EARLIEST、COUNT。
PivotAggregate - その他のデータ型用。これが基本集計です。次の集計関数が含まれています: COUNT。

現在の集計関数は、バリューチップのドロップダウンを使用して実行時に変更できます。デフォルトでは、フィールドのデータ型に基づいて使用可能な集計のリストが表示されます。集計のカスタムリストは、AggregateList プロパティを介して設定することもできます。例えば:

@code {
    IgbPivotConfiguration pivotConfiguration1 = new IgbPivotConfiguration();
    IgbPivotValue pivotValue = new IgbPivotValue()
        {
            Member = "Sales",
            Name = "pivotValue1",
            DisplayName = "Amount of Sales",
            Enabled = true,
            Aggregate = new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" }
        };
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" });
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "min", AggregatorName = PivotAggregationType.MIN, Label = "Minimum of Sales" });
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "max", AggregatorName = PivotAggregationType.MAX, Label = "Maximum of Sales" });
    pivotConfiguration1.Values.Add(pivotValue);

ピボット値は DisplayName プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。

プロパティを有効にする

PivotConfiguration は、IgbPivotGrid コンポーネントの現在の状態を記述するインターフェースです。これを使用すると、開発者はデータのフィールドを rows、columns、filters または values (行、列、フィルター、値) として宣言できます。この構成では、これらの各要素を個別に有効または無効にすることができます。ピボットグリッドの現在の状態には、有効な要素のみが含まれます。IgbPivotDataSelector コンポーネントは同じ構成を利用し、すべての有効と無効の要素のリストを表示します。それぞれについて、適切な状態のチェックボックスがあります。エンドユーザーは、これらのチェックボックスを使用してさまざまな要素を切り替えることにより、ピボット状態を簡単に調整できます。 Enable プロパティは、特定の IgbPivotDimension または IgbPivotValue がアクティブであり、ピボットグリッドによって描画されるピボットビューに参加するかどうかを制御します。

完全な構成のコード

基本的なピボット構成を見てみましょう:

    IgbPivotConfiguration pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.Rows.Add(new IgbPivotDimension()
        {
            MemberName = "SellerName",
            Enabled = true,
            Name = "pivotDimension1"
        });
    pivotConfiguration.Columns.Add(new IgbPivotDimension()
        {
            MemberName = "ProductName",
            Enabled = true,
            Name = "pivotDimension2"
        });
    pivotConfiguration.Columns.Add(new IgbPivotDimension()
        {
            MemberName = "SellerCity",
            Enabled = true,
            Name = "pivotDimension2"
        });
    pivotConfiguration.Values.Add(new IgbPivotValue()
        {
            Member = "AmountofSale",
            Name = "pivotValue1",
            Enabled = true,
            Aggregate = new IgbPivotAggregator() { Key = "SUM", AggregatorName = PivotAggregationType.SUM, Label = "Sum" }
        });
}

この構成では、各ディメンショングループの値を合計する 1 行、1 列、および 1 つの集計が定義されます。メンバーは、提供されたデータソースで使用可能なフィールドと一致します。

public PivotDataFlat()
{
    this.Add(new PivotDataFlatItem()
    {
        ProductName = @"Clothing",
            ProductUnitPrice = 12.8,
            SellerName = @"Stanley Brooker",
            SellerCity = @"Seattle",
            Date = @"2007-01-01T00:00:00",
            Value = 94.4,
            NumberOfUnits = 282
    });

完全な構成の例

上記のコードを使用すると、Date の一意の列、Product Name 、Seller City を一意の行にグループ化し、関連するセルに売上高の関連集計を表示する次の例が得られます。

既知の問題と制限

制限	説明
列を宣言的に設定することはサポートされていません。	ピボットグリッドは `Columns` (列) の構成に基づいて列を生成するため、ベースグリッドのように宣言的に設定することはサポートされていません。このような列は無視されます。
ディメンション / 値に重複した `MemberName` または `Member` プロパティ値を設定します。	これらのプロパティは、各ディメンション / 値に対して一意である必要があります。複製すると、最終結果からデータが失われる可能性があります。
行選択は、Single (単一) モードでのみサポートされます。	現在、複数選択はサポートされていません。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Blazor ピボット グリッドの概要

Blazor ピボット グリッドとは

Blazor ピボット グリッドの例

Blazor ピボット グリッドを使用した作業の開始