ピボットテーブルの項目スライサー
SpreadJSのピボットテーブルは、テーブルスライサーと同じように使用できる項目スライサーをサポートします。
以下のデモでスライサーをクリックすると、利用可能なすべてのプロパティを見ることができます。
ピボットテーブルの項目スライサーは、テーブルスライサーと同じように、SlicerCollection（WorkSheet.slicers）によって管理されます。
項目スライサーは、任意のフィールド（Calcフィールドを除く）に追加できます。 項目スライサーで行われた変更は、手動フィルターを使用した場合と同じで、ラベルフィルターの「textItems」を意味します。
スライサーの追加
項目スライサーを追加する場合は、まず例として「pt」という名前のピボットテーブルを作成します。 (initPivotTable の具体的な実装については、この記事の最後にあります)。
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();
initPivotTable();
次に、「name」フィールドに項目スライサーを追加します。
var slicer_name = sheet.slicers.add("slicer_name", pt.name(), "name", GC.Spread.Sheets.Slicers.SlicerStyles.light1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
項目の状態
項目は2つの状態を持つように定義しました。 selected：項目がフィルターによって選択されているかどうか。 noData：他のフィルターによって選択されている場合、つまり、選択してもしなくても効果がない場合は、noDataと定義します。 これら2つの状態によって、項目の状態が構成されます。 たとえば、"selected && noData"や"unselected && hasData"のようになります。
スライサーの使用
次に、slicer_nameを制御することができます。 たとえば、2つの列に項目を表示したい場合です。
slicer_name.columnCount(2);
項目の高さをより高くしたい場合
slicer_name.itemHeight(40);
noDataの状態の項目を表示したくない場合
slicer_name.showNoDataItems(false);
ピボットテーブルを作成するサンプル
function initPivotTable () {
var dataSource = [
[ "name", "product", "date", "amount", "price", "sales" ],
[ "chris", "desk", new Date("2020-10-08T16:00:00.000Z"), 5, 199, 995 ],
[ "radow", "pen", new Date("2020-09-15T16:00:00.000Z"), 2, 5, 10 ],
[ "peyton", "pencil", new Date("2021-06-22T16:00:00.000Z"), 6, 1.5, 9 ],
[ "johnson", "chair", new Date("2021-07-19T16:00:00.000Z"), 7, 68, 476 ],
[ "vic", "notebook", new Date("2021-01-13T16:00:00.000Z"), 7, 3.2, 22.4 ],
[ "lan", "desk", new Date("2021-03-12T16:00:00.000Z"), 9, 199, 1791 ],
[ "chris", "pen", new Date("2021-03-06T16:00:00.000Z"), 4, 5, 20 ],
[ "chris", "pencil", new Date("2020-09-02T16:00:00.000Z"), 10, 1.5, 15 ],
[ "radow", "chair", new Date("2020-08-09T16:00:00.000Z"), 3, 68, 204 ],
[ "peyton", "notebook", new Date("2021-02-08T16:00:00.000Z"), 9, 3.2, 28.8 ],
[ "johnson", "desk", new Date("2021-07-03T16:00:00.000Z"), 7, 199, 1393],
[ "vic", "pen", new Date("2021-06-27T16:00:00.000Z"), 8, 5, 40],
[ "lan", "pencil", new Date("2020-10-10T16:00:00.000Z"), 2, 1.5, 3],
[ "chris", "chair", new Date("2021-03-04T16:00:00.000Z"), 2, 68, 136],
[ "chris", "notebook", new Date("2021-02-21T16:00:00.000Z"), 11, 3.2, 35.2],
[ "radow", "desk", new Date("2021-06-03T16:00:00.000Z"), 6, 199, 1194]
];
var sourceSheet = spread.sheets[0];
sourceSheet.setArray(0, 0, dataSource);
sourceSheet.tables.add("table1", 0, 0, 17, 6);
spread.sheets[0].name("sourceSheet");
var pivotSheet = new GC.Spread.Sheets.Worksheet('pivotTable1');
pivotSheet.setRowCount(2000);
pivotSheet.setColumnCount(30);
spread.addSheet(1, pivotSheet);
var pt = pivotSheet.pivotTables.add("pivotTable1", "table1", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.compact, GC.Spread.Pivot.PivotTableThemes.medium1.name(), null);
pt.suspendLayout();
pt.add("name", "name", GC.Spread.Pivot.PivotTableFieldType.rowField);
pt.add("product", "product", GC.Spread.Pivot.PivotTableFieldType.rowField);
pt.group({
originFieldName: 'date',
dateGroups: [
{
by: GC.Pivot.DateGroupType.quarters
}
]
});
pt.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
pt.add("sales", "sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
pt.resumeLayout();
pt.autoFitColumn();
spread.setActiveSheet("pivotTable1");
}
項目スライサーのスタイルのカスタマイズ
SpreadJS は、ピボットテーブルの項目スライサーのスタイルのカスタマイズをサポートしています。
const customTheme = new GC.Spread.Sheets.Slicers.SlicerStyle();
customTheme.name("custom0");
const wholeSlicerStyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'white', '16px Calibri');
customTheme.wholeSlicerStyle(wholeSlicerStyle);
spread.customSlicerThemes.add(customTheme);
slicer.style("custom0");
slicer.getStyleName(); // "custom0"
// 項目スライサーのデフォルトのテーマを設定します
spread.defaultSlicerTheme('custom0');