在Office三大辦公套件中，Excel可能是功能最多、最難精通的那一款了。從日常的表格錄入到複雜的業務數據統計分析，Excel彷彿一位外表平平無奇，實力卻深不可測的武林高手。熟練使用Excel往往能在日常工作中獲得事半功倍的效果，而這裏所謂的“熟練”除了熟悉大量公式、圖表繪製等操作外，還要掌握一項非常重要的特性——數據透視表。
所謂數據透視表，就是將原始的明細數據表中涉及的各組關聯數據進行分類彙總的產物。用戶可以按照不同的組合方式對原始數據進行處理。例如下面這樣的銷售業績原始數據：
我們想要知道幾位銷售人員各自銷售了多少汽車、銷售額又是幾何，就可以使用數據透視表來分析：
從上表中可以清楚地看到幾位銷售人員各個季度都賣了多少車、銷售額多少、每個品牌賣掉多少……等信息，並且透視表中包含哪些字段都是隨意選擇的。例如我們只想統計各季度的銷量和銷售額：
這裏就略過了售車品牌信息，對應的字段選擇設置爲：
我們還可以點開每個字段，選擇需要顯示的子內容，例如只看1-3季度的業績，或者只看某位銷售人員的業績，等等。
由此可見，數據透視表是一種方便地對原始數據進行按需可視化處理的工具，在日常工作中用途非常廣泛。當工作場景中存在揉合了大量信息的原始數據表時，就可以使用數據透視表來快速獲得有意義的數據洞察結果，爲業務提供有價值的信息。
你的前端爲何需要數據透視表？
在過去，多數企業人員使用數據透視表的唯一渠道就是Excel。因爲Office辦公套件長期壟斷企業辦公市場，大部分行政和業務人員只會接觸Excel一種數據分析工具，Excel本身的功能也足夠強大，市場上就很難有其他工具的立足之地。
但隨着數字化大潮洶湧而來，數字化轉型成爲幾乎所有企業都要面對的機遇和挑戰。疫情爆發後，居家辦公的興起又對傳統辦公軟件環境發起了新的衝擊。今天的企業IT、業務和行政人員往往需要在多種軟件環境中切換，處理比過去高出一個甚至幾個數量級的海量數據，在辦公室、地鐵、賓館、家中隨時都可能需要處理業務請求。在這樣的場景中，數據分析的需求開始隨處可見、隨時出現，單憑Excel或者類似的大型單體軟件已經遠遠不能應對新時代的複雜挑戰。
仍以上述業務數據爲例，這家汽車銷售企業的業務總監可能會在內部的業績管理App上回顧本年數據，需要在App中使用數據透視表功能；人事人員統計獎金信息時，需要登入企業後臺管理網站查看業務數據，並在Web頁面上獲取業績排名；高管準備年度報告時，試圖在報告中集成動態的透視表組件，方便現場展示……所有這些需求都很難使用Excel這樣的單體軟件完成，更多情況下適合採用嵌入方法，將透視表功能嵌入對應的前端應用中實現。
隨着此類需求迅速增長，市面上開始出現一站式的解決方案，方便企業和軟件開發者將傳統上由Excel完成的功能集成到各類應用和頁面中。SpreadJS就是其中的佼佼者。在2020年發佈14.0版本中引入了強大的數據透視表功能，滿足了企業在衆多場景集成數據分析深度能力的需求，也爲前端軟件開發者大大減輕了負擔。
在前端集成數據透視表：簡要教程
使用SpreadJS，要建立一個如圖所示的前端嵌入式數據透視表是非常簡單的：
上圖中的PivotLayout工作簿是數據透視表的頁面，DataSource是原始數據頁面，圖右側的面板就是SpreadJS生成的數據透視面板，用戶可以在這裏調整所需的字段，從而改變左側數據透視表的展示信息。
在數據透視表中，存在四個區域:
- Filters: 控制數據透視表的數據範圍。
- Columns: 控制數據透視表的列分佈。
- Rows: 控制數據透視表的行分佈。
- Values: 控制數據透視表的計算數據和計算方法。
輸入以下代碼即可創建數據透視表面板:
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
用戶必須爲"panel"元素設置寬和高 。
GC.Spread.Pivot.PivotPanel構造函數參數如下：
以下是使用標準JS代碼嵌入數據透視表的app.js文件：
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);
myPivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
myPivotTable.group(groupInfo);
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);
}
對應的html頁面中加入的插件代碼：
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/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>
可以看到，總共60行左右的代碼即可在一個web頁面中嵌入數據透視表和透視表控制面板。
SpreadJS除了支持標準JS代碼外，還支持Angular、Vue和React框架。使用Angular時需要單獨創建一個app.component.html頁面，Vue和React的app文件代碼也會更長一些，並且要把插件導入的代碼段放在app文件中。
此外，數據透視表面板只是一個控制數據透視表的工具，它在使用fromJSON時會自動釋放。 數據透視表可以在沒有數據透視表面板的情況下工作。所以數據透視表支持下面的api來處理面板和數據透視表之間的關係。
將數據透視面板附加到數據透視表：
///* 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
從數據透視表中分離數據透視面板：
///* function attach(): void
/**
* @description this function will detach to a pivot table
* @returns void
*/
detach (): void
銷燬數據透視表面板：
///* function destroy (): void
/**
* @description destroy PivotPanel
*/
destroy (): void
除了透視表，你的前端還能做到這些
SpreadJS的強大並非止於數據透視表。SpreadJS在界面和功能上與Excel高度類似，可以爲企業信息化系統提供 表格文檔協同編輯、數據填報和類Excel報表設計的應用場景支持。使用SpreadJS可直接在Angular、React、Vue等前端框架中實現高效的模板設計、在線編輯和數據綁定等功能，爲最終用戶提供高度類似Excel的使用體驗。
SpreadJS使用時無需預裝任何插件或第三方組件，具備流暢的交互體驗，並可直接在瀏覽器內導入導出Excel、CSV、JSON等文件。SpreadJS兼容數百種Excel計算公式，內置18種條件格式、32種圖表、53項單元格格式和182種形狀，且支持觸摸操作，具備純中文界面。
值得一提的是，SpreadJS在構建界面時並沒有採取傳統的DOM拼接方式，而是使用HTML5 Canvas 繪製技術，在提升性能的同時打破了DOM元素渲染對UI的諸多限制，實現了更精準的UI界面渲染效果。該技術已獲得國家知識產權局頒發的發明專利證書。
在最新的SpreadJS 15.0 Update 1版本中，還加入了跨工作簿公式函數支持、日期切片器、Vue3框架支持等更新內容。隨着SpreadJS的不斷更新和發展，這款工具已經成爲現代企業在各類業務場景中實現在線Excel功能、隨時隨地滿足數據處理、分析和展示需求的最佳選項之一。點擊以下鏈接可進一步瞭解SpreadJS的強大能力，早日提升企業數據生產力。
前端表格數據透視表在線示例：
https://demo.grapecity.com.cn...