SpreadJS製品ヘルプ
項目スライサー
機能 > ピボットテーブル > スライサー > 項目スライサー

SpreadJSは、ワンクリックでピボットテーブルをフィルタリングできるスライサーを提供します。スライサーを使用して複数のピボットテーブルを接続することにより、集計ターゲットをフィルタリングできます。手動フィルターを使用して、ピボットテーブルのデータをフィルター処理できます。ユーザーフレンドリーなインターフェイスを提供し、ピボットテーブルの行フィールドと列フィールドのフィルター状態を効率的に管理できるようにします。

PivotTableItemSlicerクラスは、 ピボットテーブルスライサーを操作するためのさまざまなスライサー関連のメソッドを提供します。

次のサンプルコードは、SlicerCollection.add メソッドを使用してピボットテーブルスライサーを追加する方法を示しています。SlicerTypeは「pivotTable」に設定する必要があります。

JavaScript
コードのコピー 
$(document).ready(function () {
    // Spreadを初期化します。
    spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
    spread.options.allowDynamicArray = true;
    spread.suspendPaint();
    // シートを取得します。
    pivotLayoutSheet = spread.getSheet(0);
    dataSourceSheet = spread.getSheet(1);

    // グリッド線を非表示にします。
    pivotLayoutSheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };

    // シート名を設定します。
    pivotLayoutSheet.name("ピボットレイアウト");
    dataSourceSheet.name("データソース");
    // 行数を設定します。
    dataSourceSheet.setRowCount(245);
    // データソースを設定します。
    dataSourceSheet.setArray(0, 0, pivotDB_UseCase);
    // dataSourceSheetにテーブルを追加します。
    dataSourceSheet.tables.add('tableSales', 0, 0, 245, 8);

    // ピボットテーブルを初期化します。
    var pt = initPivotTable(pivotLayoutSheet);
    pivotLayoutSheet.setColumnCount(200);
    initSlicer(pivotLayoutSheet, pt);

    // 両方のシートに列を自動フィットします。
    autoFit(pivotLayoutSheet);
    autoFit(dataSourceSheet);
    spread.resumePaint();
});

function initPivotTable(sheet) {
    myPivotTable = sheet.pivotTables.add("pivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark3);
    myPivotTable.suspendLayout();
    myPivotTable.add("都市", "都市", GC.Spread.Pivot.PivotTableFieldType.rowField);
    myPivotTable.add("カテゴリ", "カテゴリ", GC.Spread.Pivot.PivotTableFieldType.rowField);

    myPivotTable.add("注文日", "注文日", GC.Spread.Pivot.PivotTableFieldType.columnField);
    let groupInfo = {
        originFieldName: "注文日",
        dateGroups: [
            {
                by: GC.Pivot.DateGroupType.quarters
            }
        ]
    };
    myPivotTable.group(groupInfo);
    myPivotTable.add("総計", "総計", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
    formatValueField(myPivotTable);
    myPivotTable.resumeLayout();
    myPivotTable.autoFitColumn();
    return myPivotTable;
}

function initSlicer(sheet, pt) {
    slicer_City = sheet.slicers.add("slicer_City", pt.name(), "都市", GC.Spread.Sheets.Slicers.SlicerStyles.light4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
    slicer_City.position(new GC.Spread.Sheets.Point(1020, 10));
    slicer_Category = sheet.slicers.add("slicer_Category", pt.name(), "カテゴリ", GC.Spread.Sheets.Slicers.SlicerStyles.light1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable)
    slicer_Category.position(new GC.Spread.Sheets.Point(1220, 10));
    slicer_Date = sheet.slicers.add("slicer_Date", pt.name(), "注文日", GC.Spread.Sheets.Slicers.SlicerStyles.other2(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
    slicer_Date.position(new GC.Spread.Sheets.Point(1020, 280));
}

スライサーでアイテムを並べ替える

フィルタリングと一緒にピボットテーブルスライサーでアイテムを並べ替えることができます。[スライサー設定]ダイアログボックスでは、次のオプションを使用できます。

  1. ソース名: スライサーの名前を指定します
  2. ヘッダ:
    • ヘッダーの表示チェックボックス : ヘッダーにスライサーの名前を表示するかどうかをチェックします。
    • キャプション: ヘッダーに表示するスライサーの名前。
  3. ソート状態: 昇順・降順のチェック箇所を指します。
  4. データの無いアイテムの表示 : 以下のオプションを参照してください :
    • データの無いアイテムを非表示にする: trueの場合、スライサーにデータのないアイテムは表示されません。
    • データの無いアイテムを最後に表示する: Trueの場合、データがないアイテムが最後に表示されます。falseの場合、アイテムは並べ替え状態で並べ替えられます。

      例:  OrderDateの条件が「<1/1/2013 5:30:00 and >12/30/2014 5:30:00」 の場合、ソート順によって並べ替えられます。

    • データの無いアイテムを視覚的に表示する: trueの場合、データのない項目はグレーアウトして表示されます。falseの場合、データのない項目はデータ項目と同じように表示されます。

      例: OrderDateの条件が「<1/1/2013 5:30:00 and >12/30/2014 5:30:00」の場合で該当日付にデータが含まれていない場合でもリスト表示されます。

デフォルトの並べ替え値は、「データの無いアイテムを非表示にする」と「データの無いアイテムを最後に表示する」です。スライサーアイテムは2つの部分に分割され、各部分は昇順または降順で並べ替えられます。

次のサンプルコードは、さまざまな並べ替えまたはフィルタリング機能を定義しています。

JavaScript
コードのコピー 
function setMultiSelectFalseForSlicerCity() {
    // MultiSelectをTrueに設定します。
    slicer_City.multiSelect(true);
}
function setSortStateForSlicerCity() {
    // 並べ替え状態を降順に設定します。
    slicer_City.sortState(GC.Spread.Sheets.SortState.descending);
}

function showNoDataItem() {
    myPivotTable.updateSource();
    // これをチェックするには、宇治市を削除します（またはデータソースから任意の1つの都市を選択し、このボタンをクリックします。このボタンをクリックすると、PTが最初に更新されます）。
    slicer_City.showNoDataItems(false);
}

function visuallyNoDataItems() {
    myPivotTable.updateSource();
    slicer_Date.visuallyNoDataItems(false);
}
function showNoDataItemsInLast() {
    slicer_Date.showNoDataItemsInLast(false);
}

スライサーとピボットテーブルの接続

PivotTableItemSlicer.connectPivotTable メソッドを使用して、スライサーとピボットテーブルの間に接続を確立できます。スライサーとピボットテーブルの両方が相互に接続または切断できるため、接続はどちらの側でも制御されます。スライサーがピボットテーブルと切断された場合、そのフィルターアクションはピボットテーブルに影響を与えず、スライサーでも同じことが続きます。

次のサンプルコードは、接続を切断する方法を示しています。

JavaScript
コードのコピー 
function disconnectSlicerWithPivotTable() {
    // slicer_Dateはピボットテーブルと切断します。
    slicer_Date.disconnectPivotTable(myPivotTable.name());
    slicer_Date.captionName("Disconnected");
}

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.