項目スライサー

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

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

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

$(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. ヘッダ: -

   1. ヘッダーの表示チェックボックス : ヘッダーにスライサーの名前を表示するかどうかをチェックします。

   2. キャプション: ヘッダーに表示するスライサーの名前。

3. ソート状態: 昇順・降順のチェック箇所を指します。

4. データの無いアイテムの表示 : 以下のオプションを参照してください :-

   1. データの無いアイテムを非表示にする: trueの場合、スライサーにデータのないアイテムは表示されません。

   2. データの無いアイテムを最後に表示する: Trueの場合、データがないアイテムが最後に表示されます。falseの場合、アイテムは並べ替え状態で並べ替えられます。

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

      
      

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

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

      
      

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

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

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

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

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

項目スライサーのカスタムスタイル

SpreadJS には、ピボット テーブル スライサーに適用できる 8 つの明色テーマと 6 つの暗色テーマがあらかじめ定義されています。ただし、スライサー スタイルを追加、削除、変更することでカスタム スライサー テーマを管理できます。これは、ピボット テーブル スライサーにも適用できます。これらのカスタム スタイルを使用するには、スライサーのスタイル名を設定する必要があります。スライサー スタイルを設定するには、GC.Spread.Sheets.WorkBook クラスの customSlicerThemes プロパティを使用します。

CustomSlicerThemesManager クラスは、カスタム 項目スライサー テーマを管理するための次のメソッドを提供します。

さらに、GC.Spread.Sheets.WorkBook クラスの defaultSlicerTheme メソッドを使用すると、デフォルトのスライサー スタイルを効果的に管理して、すべての項目スライサーで一貫した外観と操作性を確保できます。

メモ:

• スライサー テーマ名は一意である必要があります。

  たとえば、「TEST」という名前のカスタム 項目スライサー スタイルが既にある場合、同じ名前の別の項目スライサー スタイルを作成することはできません。

• スライサー スタイル名では大文字と小文字は区別されません。

• スタイル名がスライサーに追加されると、名前でスタイルが検索されます。スタイル名が内部スタイルと一致する場合は、直接適用されます。一致しない場合は、customStyles コレクションで対応するスタイルを検索します。見つかった場合は、そのスタイルが適用されます。見つからない場合は、既定のスタイルが使用されます。

• defaultSlicerTheme は、スライサーのスタイル名を表す文字列である必要があります。スタイルを明示的に指定せずにスライサーを作成し、このデフォルト名のスタイルが存在する場合は、そのスライサーにスタイルが適用されます。

• 使用されていないカスタムスライサー テーマは、Excel.IOによるExcelファイルのインポート／エクスポートではサポートされません。

次のサンプルコードは、カスタム スライサー テーマを管理するために必要なさまざまな方法を示しています。

1. 新しいカスタム スライサー テーマを追加します。

   const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   
   // 「custom0」という名前の新しいスライサー テーマを追加します。
   const slicerStyle = spread.customSlicerThemes.add("custom0");
   const styleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
   styleInfo.backColor("orange");
   styleInfo.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(2,"solid","green"));
   slicerStyle.wholeSlicerStyle(styleInfo);
   
   

2. カスタム スライサー テーマを取得します。

   const slicerTheme = spread.customSlicerThemes.get("custom0");
   
   

3. カスタム スライサー テーマを適用します。

   slicer.style("custom0");
   
   

4. カスタム スライサー テーマを変更します。

   既存のスライサー スタイルを変更すると、そのスタイルが以前に適用されていたすべてのスライサーが自動的に更新されます。

   // カスタム スライサー テーマを変更します。
   const slicerStyle = spread.customSlicerThemes.get("custom0");
   slicerStyle.wholeSlicerStyle().backColor("red");
   
   // カスタム スライサー テーマを更新します。
   spread.customSlicerThemes.update("custom0", new GC.Spread.Sheets.Slicers.SlicerStyle());
   
   

5. 既存のカスタム スライサー テーマを削除します。

   カスタム スライサー スタイルを削除すると、削除されたスタイルを使用していたすべてのスライサーが既定のスタイルに切り替わります。

   // カスタム スライサー テーマを削除します。
   spread.customSlicerThemes.remove("custom0");
   
   

以下の手順に従って、SpreadJS デザイナを使用してスライサー スタイルを追加および書式設定することもできます。

1. 追加されたスライサーをクリックして「スライサー」タブを開き、スライサー設定を構成します。

2. [スライサースタイル] グループにある [スタイル] ボタンをクリックします。

   
   

   
   

   
   

   
   

3. ドロップダウン矢印をクリックし、[新しいスライサー スタイル] オプションを選択します。

   
   

   
   

   
   

   
   

4. [新しいスライサー スタイル] ダイアログで、[名前] フィールドに新しいスタイル名を入力し、[スライサーの要素] セクションからスタイルを適用する要素を選択して、[書式] をクリックし、カスタム スライサー テーマに必要なスタイルを構成します。

   
   

   
   

   
   

   
   

5. ユーザーが作成したすべてのスライサー スタイルは、スライサー スタイル コレクション リストの [ユーザー設定] セクションに表示されます。

   
   

   
   

   
   

   
   

6. カスタム スライサー スタイルを右クリックし、要件に応じて、適用、変更、複製、削除、デフォルトに設定などのアクションを実行します。

   
   

   
   

メモ: 組み込みのピボット テーブル スライサー スタイルを変更または削除することはできません。