피벗 패널

오른쪽 아래 피벗 패널은 피벗 테이블에서 필드를 추가, 제거, 끌기 및 이동하는 데 사용되는 패널입니다. 이 패널은 피벗 테이블 필드, 피벗 테이블 영역, 피벗 보기 관리자 섹션으로 구성되어 있고 쉽게 사용자 정의할 수 있습니다.

설명
app.js
index.html
styles.css

PivotPanel에는 다음과 같은 4가지 영역이 있습니다.

  • 필터: 피벗 테이블의 데이터 범위를 제어합니다.
  • 열: 피벗 테이블의 열 분포를 제어합니다.
  • 행: 피벗 테이블의 행 분포를 제어합니다.
  • 값: 피벗 테이블의 요약 데이터 및 요약 방법을 제어합니다.

PivotPanel은 다음과 같이 만들 수 있습니다.

let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));

사용자는 "panel" 요소에 대한 너비높이를 설정해야 합니다.

GC.Spread.Pivot.PivotPanel 구성자의 매개 변수는 아래와 같습니다.

매개 변수 유형 설명
name 문자열 피벗 패널의 이름
pivotTable GC.Spread.Pivot.PivotTable 피벗 테이블이 연결되는 피벗 패널
host HTMLDivElement 이 컨테이너의 호스트 피벗 패널

PivotPanel은 피벗 테이블을 제어하기 위한 유일한 도구이고, fromJSON을 사용하는 경우 자동 삭제됩니다.
피벗 테이블은 PivotPanel 없이 작동할 수 있습니다. 따라서 피벗 테이블은 PivotPanel과 피벗 테이블의 관계를 처리하기 위해 아래 API를 제공합니다.

피벗 테이블에 PivotPanel 연결:

///* function attach(pivotTable: GC.Spread.Pivot.PivotTable) :void
/**
 * @description this function will attach to a pivot table
 * @param pivotTable
 * @returns void
 */
attach (pivotTable: IPivotTable): void

피벗 테이블에서 PivotPanel 분리:

///* function attach(): void
/**
 * @description this function will detach to a pivot table
 * @returns void
 */
 detach (): void

PivotPanel 삭제:

///* function destroy (): void
/**
 * @description destroy PivotPanel
 */
destroy (): void
PivotPanel에는 다음과 같은 4가지 영역이 있습니다. 필터: 피벗 테이블의 데이터 범위를 제어합니다. 열: 피벗 테이블의 열 분포를 제어합니다. 행: 피벗 테이블의 행 분포를 제어합니다. 값: 피벗 테이블의 요약 데이터 및 요약 방법을 제어합니다. PivotPanel은 다음과 같이 만들 수 있습니다. 사용자는 "panel" 요소에 대한 너비 및 높이를 설정해야 합니다. GC.Spread.Pivot.PivotPanel 구성자의 매개 변수는 아래와 같습니다. 매개 변수 유형 설명 name 문자열 피벗 패널의 이름 pivotTable GC.Spread.Pivot.PivotTable 피벗 테이블이 연결되는 피벗 패널 host HTMLDivElement 이 컨테이너의 호스트 피벗 패널 PivotPanel은 피벗 테이블을 제어하기 위한 유일한 도구이고, fromJSON을 사용하는 경우 자동 삭제됩니다. 피벗 테이블은 PivotPanel 없이 작동할 수 있습니다. 따라서 피벗 테이블은 PivotPanel과 피벗 테이블의 관계를 처리하기 위해 아래 API를 제공합니다. 피벗 테이블에 PivotPanel 연결: 피벗 테이블에서 PivotPanel 분리: PivotPanel 삭제:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); initPivotTable(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"); 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("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField); let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("분기 (date)", "분기 (date)", 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 _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 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; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .gc-panel { padding: 10px; background-color: rgb(230, 230, 230); } #panel { position: absolute; right: 0; width: 300px; height: 100%; top: 0; } #app { height: 100%; }