피벗 테이블 시간 표시 막대 슬라이서
SpreadJS 피벗 테이블은 날짜 슬라이싱 작업을 편리하게 수행할 수 있는 시간 표시 막대 슬라이서 기능을 지원합니다.
사용 가능한 모든 속성을 보려면 아래 데모에서 슬라이서를 클릭해 보십시오.
설명
app.vue
index.html
styles.css
피벗 테이블 시간 표시 막대 슬라이서는 표 슬라이서와 동일하게 SlicerCollection(WorkSheet.slicers)에 의해 관리됩니다.
시간 표시 막대 슬라이서는 날짜 필드에만 추가할 수 있습니다. 시간 표시 막대 슬라이서를 변경하는 것은 레이블 필터에서 "condition"을 의미하는 조건 필터를 사용하는 것과 같습니다.
시간 표시 막대 추가
피벗 테이블 시간 표시 막대 슬라이서를 추가하려면 "pt"라는 이름의 피벗 테이블을 만들면 됩니다. initPivotTable의 구체적인 구현 방법은 이 문서 끝 부분에서 확인할 수 있습니다.
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();
initPivotTable();
그런 다음 "date" 필드에 시간 표시 막대 슬라이서를 추가합니다.
var timeline_date = sheet.slicers.add("timeline_date", pt.name(), "date", GC.Spread.Sheets.Slicers.TimelineStyles.light1().name(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
시간 표시 막대 사용
그런 다음 timeline_date를 제어할 수 있습니다. 예를 들어 가로 스크롤 막대를 표시할 필요가 없는 경우:
timeline_date.showHorizontalScrollbar(false);
시간 표시 막대를 미래의 특정 날짜로 스크롤하려는 경우:
timeline_date.scrollPosition(new Date('2021-6-23'));
연도별로 필터링하려는 경우:
timeline_date.level(GC.Spread.Sheets.Slicers.TimelineLevel.years);
피벗 테이블 만들기 샘플
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.years
},
{
by: GC.Pivot.DateGroupType.quarters
},
{
by: GC.Pivot.DateGroupType.months
},
]
});
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.TimelineStyle();
customTheme.name("custom0");
const wholeSlicerStyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'white', '16px Calibri');
customTheme.wholeSlicerStyle(wholeSlicerStyle);
spread.customTimelineThemes.add(customTheme);
slicer.style("custom0");
slicer.getStyleName(); // "custom0"
// set default table theme
spread.defaultTimelineTheme('custom0');