SpreadJS 피벗 테이블에서는 다음 두 가지 서식의 데이터 소스를 지원합니다.
테이블 이름: 피벗 테이블에서는 테이블 이름을 사용하여 소스 데이터를 가져옵니다.
범위 수식: 피벗 테이블에서는 범위를 사용하여 소스 데이터를 가져옵니다. 범위 수식은 절대 경로여야 합니다.
피벗 테이블을 사용하려면 js 파일 링크를 문서의 헤더 섹션에 추가하십시오.
다음과 같이 테이블 이름을 사용하여 피벗 테이블을 빌드합니다.
다음과 같이 범위 수식을 사용하여 피벗 테이블을 빌드합니다.
다음과 같이 TableSheet 이름을 사용하여 피벗 테이블을 빌드합니다.
피벗 테이블에서 사용한 데이터 소스가 변경되고 피벗 테이블이 데이터 소스를 업데이트해야 하는 경우 다음과 같이 데이터 소스를 업데이트할 수 있습니다.
피벗 테이블에서 데이터 소스 업데이트:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
</div>
</template>
<script>
import GC from "@mescius/spread-sheets";
import {
ref
} from "vue";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
export default {
name: 'App',
setup() {
const spreadRef = ref(null);
function initSpread(spread) {
spreadRef.value = 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 = 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.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();
}
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.medium2);
}
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);
let groupInfo = {
originFieldName: "date",
dateGroups: [{
by: GC.Pivot.DateGroupType.quarters
}]
};
pivotTable.group(groupInfo);
pivotTable.add("분기 (date)", "분기 (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
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);
}
}
return {
initSpread
}
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ko/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.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",
'@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-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
