피벗 패널은 세 개의 섹션으로 구성됩니다.
필드 섹션(필드 선택 영역)
사용할 수 있는 모든 데이터 원본 필드를 목록으로 표시합니다.
사용자는 체크박스를 통해 피벗 테이블에 필드를 빠르게 추가하거나 제거할 수 있습니다.
아래 영역(필터/행/열/값)으로 필드를 끌어서 놓는 작업을 지원합니다.
검색 상자로 필드 목록을 빠르게 필터링할 수 있습니다.
영역 섹션(끌어서 놓기 영역)
피벗 테이블 영역 섹션에는 네 가지 영역이 있습니다.
필터: 피벗 테이블의 데이터 범위를 제어합니다.
열: 피벗 테이블의 열 배치를 제어합니다.
행: 피벗 테이블의 행 배치를 제어합니다.
값: 피벗 테이블의 요약 데이터와 요약 방법을 제어합니다.
ViewList 섹션(뷰 관리)
피벗 테이블의 여러 뷰 구성을 관리합니다.
서로 다른 필드 레이아웃 구성 간에 빠르게 전환합니다.
뷰 추가: 현재 필드 구성을 새 뷰로 저장합니다.
뷰 적용: 이전에 저장한 구성을 복원합니다.
드롭다운 목록에 저장된 모든 뷰 이름이 표시됩니다.
날짜 필드 자동 그룹화
날짜 필드를 행 또는 열 영역에 추가하면 피벗 테이블이 데이터의 날짜 범위에 따라 자동으로 그룹화할 수 있습니다. 그룹화 세분성은 자동으로 결정됩니다.
여러 해에 걸친 데이터: 연, 분기, 월별로 그룹화합니다.
단일 연도 안에서 여러 월에 걸친 데이터: 월, 일별로 그룹화합니다.
단일 월 안에서 여러 일에 걸친 데이터: 일 및 시간 구성 요소별로 그룹화합니다.
이 기능을 사용하려면 PivotTableChanging 이벤트를 수신하고 autoGroupDateField를 true로 설정합니다.
다음과 같이 피벗 패널을 만들 수 있습니다.
또한 사용자는 "panel" 요소에 width와 height를 설정해야 합니다.
GC.Spread.Pivot.PivotPanel 생성자의 매개 변수는 다음과 같습니다.
매개 변수
형식
설명
name
string
피벗 패널의 이름입니다.
pivotTable
GC.Spread.Pivot.PivotTable
피벗 패널과 연결할 피벗 테이블입니다.
host
HTMLDivElement
이 컨테이너에 피벗 패널을 호스팅합니다.
피벗 패널은 피벗 테이블을 제어하는 도구일 뿐이며, fromJSON을 사용할 때 자동으로 삭제됩니다.
피벗 테이블은 피벗 패널 없이도 동작할 수 있습니다. 피벗 테이블은 피벗 패널과 피벗 테이블 간의 관계를 처리하기 위해 다음 API를 지원합니다.
피벗 패널을 피벗 테이블에 연결:
피벗 테이블에서 피벗 패널 분리:
피벗 패널 삭제:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
initSpread(spread);
var pivotLayoutSheet = spread.getSheet(0);
initPivotTable(pivotLayoutSheet);
initAutoGroupOption(pivotLayoutSheet);
};
function initSpread(spread) {
spread.suspendPaint();
let sheet = spread.getSheet(1);
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");
sheet.setArray(0, 0, pivotSales);
let table = sheet.tables.add('tableSales', 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"]);
let sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
sheet0.setColumnCount(50);
spread.resumePaint();
}
function initPivotTable(sheet) {
let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
}
function initAutoGroupOption(sheet) {
var autoGroupEnabled = false;
sheet.bind(GC.Spread.Sheets.Events.PivotTableChanging, function (sender, args) {
if (autoGroupEnabled) {
args.autoGroupDateField = true;
}
});
var checkbox = _getElementById('autoGroupDate');
checkbox.addEventListener('change', function () {
autoGroupEnabled = this.checked;
});
}
function _getElementById(id) {
return document.getElementById(id);
}
<!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="sample-panel">
<div class="auto-group-option">
<input type="checkbox" id="autoGroupDate">
<label for="autoGroupDate">날짜 필드를 추가할 때 자동 그룹화 사용</label>
</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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.sample-panel {
float: right;
width: 300px;
height: 100%;
box-sizing: border-box;
background: #e6e6e6;
overflow: hidden;
}
.gc-panel {
padding: 10px;
background-color: rgb(230, 230, 230);
}
.auto-group-option {
padding: 10px 5px 10px 10px;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #333;
display: flex;
align-items: center;
gap: 6px;
}
.auto-group-option input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
width: 14px;
height: 14px;
flex-shrink: 0;
cursor: pointer;
background: transparent;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtVW5jaGVja2VkPC90aXRsZT48ZyBpZD0iQ2hlY2tib3gtVW5jaGVja2VkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTMsMSBDMTQuMTA0NTY5NSwxIDE1LDEuODk1NDMwNSAxNSwzIEwxNSwxMyBDMTUsMTQuMTA0NTY5NSAxNC4xMDQ1Njk1LDE1IDEzLDE1IEwzLDE1IEMxLjg5NTQzMDUsMTUgMSwxNC4xMDQ1Njk1IDEsMTMgTDEsMyBDMSwxLjg5NTQzMDUgMS44OTU0MzA1LDEgMywxIEwxMywxIFogTTEzLDIuNSBMMywyLjUgQzIuNzIzODU3NjMsMi41IDIuNSwyLjcyMzg1NzYzIDIuNSwzIEwyLjUsMTMgQzIuNSwxMy4yNzYxNDI0IDIuNzIzODU3NjMsMTMuNSAzLDEzLjUgTDEzLDEzLjUgQzEzLjI3NjE0MjQsMTMuNSAxMy41LDEzLjI3NjE0MjQgMTMuNSwxMyBMMTMuNSwzIEMxMy41LDIuNzIzODU3NjMgMTMuMjc2MTQyNCwyLjUgMTMsMi41IFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+");
}
.auto-group-option input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtQ2hlY2tlZDwvdGl0bGU+PGcgaWQ9IkNoZWNrYm94LUNoZWNrZWQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMywxIEMxNC4xMDQ1Njk1LDEgMTUsMS44OTU0MzA1IDE1LDMgTDE1LDEzIEMxNSwxNC4xMDQ1Njk1IDE0LjEwNDU2OTUsMTUgMTMsMTUgTDMsMTUgQzEuODk1NDMwNSwxNSAxLDE0LjEwNDU2OTUgMSwxMyBMMSwzIEMxLDEuODk1NDMwNSAxLjg5NTQzMDUsMSAzLDEgTDEzLDEgWiBNMTIuNTU0MzcwNiw0LjcxOTY2OTkxIEMxMi4yNjE0Nzc0LDQuNDI2Nzc2NyAxMS43ODY2MDM3LDQuNDI2Nzc2NyAxMS40OTM3MTA1LDQuNzE5NjY5OTEgTDYuNjg3NjYxMzcsOS41MjUgTDQuNDQwOTkxNDUsNy4yNzgzNDQ3OSBDNC4xNDgwOTgyMyw2Ljk4NTQ1MTU4IDMuNjczMjI0NSw2Ljk4NTQ1MTU4IDMuMzgwMzMxMjgsNy4yNzgzNDQ3OSBDMy4wODc0MzgwNiw3LjU3MTIzODAxIDMuMDg3NDM4MDYsOC4wNDYxMTE3NSAzLjM4MDMzMTI4LDguMzM5MDA0OTcgTDYuMTU3NjgzNDMsMTEuMTE2MzU3MSBDNi4yOTA4MTY3MSwxMS4yNDk0OTA0IDYuNDYxNTQ5MjcsMTEuMzIyMTA4NSA2LjYzNTY5OTk1LDExLjMzNDIxMTYgTDYuNzQwMzI3MDgsMTEuMzM0MjExNiBMNi44NDQxMzM4NiwxMS4zMTk2ODc5IEM2Ljk4MTI2NjgxLDExLjI5MDY0MDcgNy4xMTE4MzY5OCwxMS4yMjI4NjM3IDcuMjE4MzQzNiwxMS4xMTYzNTcxIEwxMi41NTQzNzA2LDUuNzgwMzMwMDkgQzEyLjg0NzI2MzgsNS40ODc0MzY4NyAxMi44NDcyNjM4LDUuMDEyNTYzMTMgMTIuNTU0MzcwNiw0LjcxOTY2OTkxIFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+");
}
.auto-group-option label {
cursor: pointer;
user-select: none;
}
#panel {
width: 300px;
height: calc(100% - 36px);
}
#app {
height: 100%;
}
