数据透视表面板

在数据透视表中,字段是使用数据透视表面板排列的。排列和设置决定了数据透视表的最终结果。

在数据透视表中,存在四个区域: Filters: 控制数据透视表的数据范围。 Columns: 控制数据透视表的列分布。 Rows: 控制数据透视表的行分布。 Values: 控制数据透视表的计算数据和计算方法。 你能够像如下一样创建数据透视表面板: 用户必须为 "panel" 元素设置 宽 和 高 。 GC.Spread.Pivot.PivotPanel 的构造函数的参数如下: 参数 类型 描述 name string 数据透视表面板名称 pivotTable GC.Spread.Pivot.PivotTable 数据透视表面板应用到的数据透视表 host HTMLDivElement 数据透视表面板所属的容器 PivotPanel只是一个控制数据透视表的工具,它在使用fromJSON时会自动释放。 数据透视表可以在没有数据透视表面板的情况下工作。所以数据透视表支持下面的api来处理数据透视表面板和数据透视表之间的关系。 关联一个数据透视表面板到数据透视表: 从数据透视表中分离数据透视面板: 销毁数据透视表面板:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); var pt = initPivotTable(pivotLayoutSheet); doAutoFitColumn(pivotLayoutSheet); }; function initSpread(spread) { spread.suspendPaint(); var sheet1 = spread.getSheet(1); sheet1.name("DataSource"); sheet1.setRowCount(700); sheet1.setColumnWidth(5, 150); sheet1.setArray(0, 0, pivotSales); sheet1.tables.add('tableSales', 0, 0, 642, 6); var sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); } function initPivotTable(sheet) { var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark2); myPivotTable.suspendLayout(); myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("country", "Country", GC.Spread.Pivot.PivotTableFieldType.rowField); var groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("amount", "Sum of amount", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); myPivotTable.resumeLayout(); return myPivotTable; } function doAutoFitColumn (sheet) { sheet.suspendPaint(); var colCount = sheet.getColumnCount(); for (var i = 0; i < colCount; i++) { sheet.autoFitColumn(i); } sheet.setColumnWidth(0, 20); sheet.setRowHeight(0, 20); sheet.resumePaint(); } function _getElementById(id) { return document.getElementById(id); }
<!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" /> <meta name="spreadjs culture" content="zh-cn" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/pivotSales.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%; }