피벗 테이블 항목 슬라이서
SpreadJS 피벗 테이블은 표 슬라이서처럼 사용할 수 있는 항목 슬라이서를 지원합니다.
사용 가능한 모든 속성을 보려면 아래 데모에서 슬라이서를 클릭해 보십시오.
설명
app.js
index.html
styles.css
피벗 테이블 항목 슬라이서는 표 슬라이서와 동일하게 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().name(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);
항목 상태
항목을 두 가지 상태로 정의했습니다.
- selected: 항목이 필터에 의해 선택되었는지 여부.
- noData: 항목이 다른 필터에 의해 필터링되어 있다면 선택 여부에 관계없이 해당 항목이 적용되지 않음을 의미하며, 이 상태를 noData로 정의했습니다.
이 두 가지 상태가 항목 상태를 구성합니다. 예: "selected && noData" 또는 "unselected && hasData"
슬라이서 사용
그런 다음 slicer_name을 정의할 수 있습니다. 예를 들어 두 개의 열에서 항목을 표시하려는 경우:
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("분기 (date)", "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"
// set default item slicer theme
spread.defaultSlicerTheme('custom0');