개요

SpreadJS에서는 피벗 테이블 보고서를 지원합니다. 피벗 테이블 추가 기능은 현재 베타 버전으로서 정렬, 필터링 등과 같은 여러 가지 기능을 지원하고, 여러 차원에 따라 데이터를 분석하고 여러 가지 테마를 지원합니다.

SpreadJS 피벗 테이블에서는 다음 두 가지 서식의 데이터 소스를 지원합니다. 테이블 이름: 피벗 테이블에서는 테이블 이름을 사용하여 소스 데이터를 가져옵니다. 범위 수식: 피벗 테이블에서는 범위를 사용하여 소스 데이터를 가져옵니다. 범위 수식은 절대 경로여야 합니다. 피벗 테이블을 사용하려면 js 파일 링크를 문서의 헤더 섹션에 추가하십시오. 다음과 같이 테이블 이름을 사용하여 피벗 테이블을 빌드합니다. 다음과 같이 범위 수식을 사용하여 피벗 테이블을 빌드합니다. If the data source used by PivotTable changes, and the PivotTable needs to update the data source, you can update it in the following way. PivotTable update data source:
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 4}); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); let sheet1 = spread.getSheet(0); let sheet2 = spread.getSheet(1); let sheet3 = spread.getSheet(2); let sheet4 = spread.getSheet(3); let tableName = getDataSource(sheet4, pivotSales); initPivotTable(sheet1, tableName); addCustom(sheet2, tableName); initBlankPivot(sheet3, tableName); columnFit(sheet4,0,6,100); spread.resumePaint(); } function getDataSource(sheet, tableSource){ sheet.name("DataSource"); sheet.setRowCount(117); sheet.getCell(-1, 0).formatter("YYYY-mm-DD"); sheet.getRange(-1,4,0,2).formatter("$ #,##0"); let table = sheet.tables.add('table', 0, 0, 117, 6); for(let i=2;i<=117;i++) { sheet.setFormula(i-1,5,'=D'+i+'*E'+i) } table.style(GC.Spread.Sheets.Tables.TableThemes["none"]); sheet.setArray(0, 0, tableSource); return table.name(); } function addCustom(sheet, tableName){ sheet.name("Custom PivotTable"); sheet.setRowCount(1000); let pivotTableOptions = {bandRows:true,bandColumns:true}; let pivotTable = sheet.pivotTables.add("CustomPivotTable", tableName, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.tabular, GC.Spread.Pivot.PivotTableThemes.light8, pivotTableOptions); pivotTable.suspendLayout(); pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField); pivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); let itemList = ["Alan","John", "Tess"]; pivotTable.labelFilter("Salesperson", { textItem: { list: itemList, isAll: false } }); pivotTable.sort("Salesperson", { sortType: GC.Pivot.SortType.asc }); let carList = ["Audi","BMW","Mercedes"]; pivotTable.labelFilter("Cars", { textItem: { list: carList, isAll: false } }); pivotTable.sort("Cars", { sortType: GC.Pivot.SortType.asc }); let style = new GC.Spread.Sheets.Style(); style.formatter = "$ #,##0"; pivotTable.setStyle({dataOnly: true}, style); pivotTable.resumeLayout(); pivotTable.autoFitColumn(); } function initBlankPivot(sheet, source){ sheet.name("Blank PivotTable"); sheet.setColumnWidth(0, 20); sheet.pivotTables.add("BlankPivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium4); } function initPivotTable(sheet, tableName){ sheet.name("Basic PivotTable"); sheet.setRowCount(1000); let pivotTableOptions = {bandRows:true,bandColumns:true}; let pivotTable = sheet.pivotTables.add("PivotTable", tableName, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium1, pivotTableOptions); pivotTable.suspendLayout(); pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField); pivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField); let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; pivotTable.group(groupInfo); pivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); let style = new GC.Spread.Sheets.Style(); style.formatter = "$ #,##0"; pivotTable.setStyle({dataOnly: true}, style); pivotTable.resumeLayout(); pivotTable.autoFitColumn(); } function columnFit(sheet,start,end,width){ for (let i = start; i < end; i++) { sheet.setColumnWidth(i, width); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div id="optionContainer" class="optionContainer"> </div> </div> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; }