사용자 지정 부분합을 사용하면 피벗 테이블 차원 필드에 표시할 부분합 계산을 제어할 수 있습니다. 기본 부분합 동작만 사용하는 대신 합계, 평균, 개수, 최솟값 또는 최댓값과 같은 하나 이상의 부분합 형식을 지정할 수 있습니다.
사용자 지정 부분합 설정은 리프 필드를 포함한 행 또는 열 필드에 적용할 수 있습니다. 따라서 피벗 테이블 계층의 각 수준에 서로 다른 요약 계산을 표시할 수 있습니다.
다음 API로 소스 필드의 사용자 지정 부분합 정보를 가져오거나 설정할 수 있습니다.
예제:
사용자 지정 부분합 정보는 다음 형식을 사용합니다.
기본 부분합 동작을 복원하려면 useDefault: true를 사용합니다. 지정한 부분합 계산만 표시하려면 useDefault: false와 types를 함께 사용합니다.
사용자 지정 부분합 설정은 피벗 테이블 직렬화에 포함됩니다.
피벗 영역 참조는 사용자 지정 부분합 형식을 대상으로 지정할 수도 있습니다. 특정 사용자 지정 부분합 셀에 스타일을 적용하거나 피벗 테이블 범위를 확인할 때 유용합니다.
예를 들어 필드의 평균 부분합 셀에만 스타일을 적용할 수 있습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var pivotSheet = spread.getSheet(0);
var sourceSheet = spread.getSheet(1);
var tableName = initDataSource(sourceSheet);
initPivotTable(pivotSheet, tableName);
spread.resumePaint();
}
function initDataSource(sheet) {
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnCount(8);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1, 4, 0, 2).formatter("$#,##0");
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 80);
sheet.setColumnWidth(3, 90);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(5, 100);
var table = sheet.tables.add("tableSales", 0, 0, 117, 6);
table.style(GC.Spread.Sheets.Tables.TableThemes.medium2);
sheet.setArray(0, 0, pivotSales);
for (var row = 2; row <= 117; row++) {
sheet.setFormula(row - 1, 5, "=D" + row + "*E" + row);
}
return table.name();
}
function initPivotTable(sheet, tableName) {
sheet.name("사용자 지정 부분합");
sheet.setRowCount(120);
sheet.setColumnCount(20);
sheet.setColumnWidth(0, 18);
var pivotTable = sheet.pivotTables.add(
"carPerformance",
tableName,
2,
1,
GC.Spread.Pivot.PivotTableLayoutType.tabular,
GC.Spread.Pivot.PivotTableThemes.medium8
);
pivotTable.suspendLayout();
pivotTable.options.showRowHeader = true;
pivotTable.options.showColumnHeader = true;
pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
var groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
pivotTable.group(groupInfo);
pivotTable.add("분기 (date)", "분기 (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("total", "Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
pivotTable.dimensionSubtotals("salesperson", {
useDefault: false,
types: [
GC.Pivot.SubtotalType.sum,
GC.Pivot.SubtotalType.average
]
});
pivotTable.dimensionSubtotals("car", {
useDefault: false,
types: [
GC.Pivot.SubtotalType.count,
GC.Pivot.SubtotalType.max
]
});
var averageSubtotalStyle = new GC.Spread.Sheets.Style();
averageSubtotalStyle.formatter = "0.00";
pivotTable.setStyle({
dataOnly: true,
references: [{
fieldName: "Salesperson",
subtotalTypes: [GC.Pivot.SubtotalType.average]
}]
}, averageSubtotalStyle);
var panel = new GC.Spread.Pivot.PivotPanel("customSubtotalPanel", pivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
pivotTable.resumeLayout();
pivotTable.autoFitColumn();
sheet.setValue(0, 1, "영업 담당자 및 분기별 자동차 판매 실적");
sheet.setValue(1, 1, "영업 담당자의 사용자 지정 부분합은 총매출과 평균 거래 규모를 표시하고, 자동차의 사용자 지정 부분합은 주문 수와 최대 거래 규모를 표시합니다.");
sheet.getCell(0, 1).font("bold 14px Calibri");
}
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.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 class="options-container">
<div class="panel-tip">
PivotPanel에서 행 또는 열 필드 설정을 열고 부분합을 사용자 지정으로 설정한 다음 표시할 부분합 형식을 선택합니다.
</div>
<div id="panel"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 300px;
height: 100%;
box-sizing: border-box;
background: #e6e6e6;
overflow: hidden;
display: flex;
flex-direction: column;
}
.panel-tip {
padding: 10px;
font-size: 12px;
line-height: 1.4;
color: #333;
background: #f7f7f7;
border-bottom: 1px solid #d0d0d0;
box-sizing: border-box;
}
#panel {
width: 300px;
flex: 1 1 auto;
min-height: 0;
}
.gc-panel {
padding: 10px;
background-color: #e6e6e6;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
