SpreadJS 피벗 테이블에서는 다음 두 가지 서식의 데이터 소스를 지원합니다.
테이블 이름: 피벗 테이블에서는 테이블 이름을 사용하여 소스 데이터를 가져옵니다.
범위 수식: 피벗 테이블에서는 범위를 사용하여 소스 데이터를 가져옵니다. 범위 수식은 절대 경로여야 합니다.
피벗 테이블을 사용하려면 js 파일 링크를 문서의 헤더 섹션에 추가하십시오.
다음과 같이 테이블 이름을 사용하여 피벗 테이블을 빌드합니다.
다음과 같이 범위 수식을 사용하여 피벗 테이블을 빌드합니다.
다음과 같이 TableSheet 이름을 사용하여 피벗 테이블을 빌드합니다.
피벗 테이블에서 사용한 데이터 소스가 변경되고 피벗 테이블이 데이터 소스를 업데이트해야 하는 경우 다음과 같이 데이터 소스를 업데이트할 수 있습니다.
피벗 테이블에서 데이터 소스 업데이트:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
</div>
</template>
<script>
import Vue from 'vue';
import '@mescius/spread-sheets-vue'
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import './styles.css';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
let App = Vue.extend({
name: "app",
methods: {
initSpread:function(spread) {
spread.suspendPaint();
spread.setSheetCount(4);
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
let sheet3 = spread.getSheet(2);
let sheet4 = spread.getSheet(3);
let tableName = this.getDataSource(sheet4, pivotSales);
this.initPivotTable(sheet1, tableName);
this.addCustom(sheet2, tableName);
this.initBlankPivot(sheet3, tableName);
this.columnFit(sheet4,0,6,100);
spread.resumePaint();
},
getDataSource:function(sheet, tableSource){
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
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();
},
addCustom:function(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();
},
initBlankPivot:function(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.medium2);
},
initPivotTable:function(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();
},
columnFit:function(sheet,start,end,width){
for (let i = start; i < end; i++) {
sheet.setColumnWidth(i, width);
}
}
},
computed: {
dataSource() {
return getData();
}
}
});
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/ko/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);