在Office三大办公套件中，Excel可能是性能最多、最难精通的那一款了。从日常的表格录入到简单的业务数据统计分析，Excel好像一位表面平平无奇，实力却深不可测的武林高手。纯熟应用Excel往往能在日常工作中取得事倍功半的成果，而这里所谓的“纯熟”除了相熟大量公式、图表绘制等操作外，还要把握一项十分重要的个性——数据透视表。

所谓数据透视表，就是将原始的明细数据表中波及的各组关联数据进行分类汇总的产物。用户能够依照不同的组合形式对原始数据进行解决。例如上面这样的销售业绩原始数据：

咱们想要晓得几位销售人员各自销售了多少汽车、销售额又是几何，就能够应用数据透视表来剖析：

从上表中能够分明地看到几位销售人员各个季度都卖了多少车、销售额多少、每个品牌卖掉多少……等信息，并且透视表中蕴含哪些字段都是随便抉择的。例如咱们只想统计各季度的销量和销售额：

这里就略过了售车品牌信息，对应的字段抉择设置为：

咱们还能够点开每个字段，抉择须要显示的子内容，例如只看1-3季度的业绩，或者只看某位销售人员的业绩，等等。

由此可见，数据透视表是一种不便地对原始数据进行按需可视化解决的工具，在日常工作中用处十分宽泛。当工作场景中存在揉合了大量信息的原始数据表时，就能够应用数据透视表来疾速取得有意义的数据洞察后果，为业务提供有价值的信息。

你的前端为何须要数据透视表？

在过来，少数企业人员应用数据透视表的惟一渠道就是Excel。因为Office办公套件长期垄断企业办公市场，大部分行政和业务人员只会接触Excel一种数据分析工具，Excel自身的性能也足够弱小，市场上就很难有其余工具的立足之地。

但随着数字化大潮汹涌而来，数字化转型成为简直所有企业都要面对的时机和挑战。疫情暴发后，居家办公的衰亡又对传统办公软件环境发动了新的冲击。明天的企业IT、业务和行政人员往往须要在多种软件环境中切换，解决比过来高出一个甚至几个数量级的海量数据，在办公室、地铁、宾馆、家中随时都可能须要解决业务申请。在这样的场景中，数据分析的需要开始随处可见、随时呈现，单凭Excel或者相似的大型单体软件曾经远远不能应答新时代的简单挑战。

仍以上述业务数据为例，这家汽车销售企业的业务总监可能会在外部的业绩治理App上回顾本年数据，须要在App中应用数据透视表性能；人事人员统计奖金信息时，须要登入企业后盾治理网站查看业务数据，并在Web页面上获取业绩排名；高管筹备年度报告时，试图在报告中集成动静的透视表组件，不便现场展现……所有这些需要都很难应用Excel这样的单体软件实现，更多状况下适宜采纳嵌入办法，将透视表性能嵌入对应的前端利用中实现。

随着此类需要迅速增长，市面上开始呈现一站式的解决方案，不便企业和软件开发者将传统上由Excel实现的性能集成到各类利用和页面中。咱们明天的配角——SpreadJS就是其中的佼佼者。SpreadJS是由葡萄城开发的，基于HTML5的纯前端表格控件，兼容450种以上的Excel公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品个性，备受华为、明源云、远光软件等知名企业青眼，被中国软件行业协会认定为“中国优良软件产品”。在2020年公布的SpreadJS 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是葡萄城联合40余年业余控件技术和在电子表格应用领域的教训而推出的纯前端表格控件，倒退到明天性能已成为性能足以与Excel相媲美的在线表格控件。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...

葡萄城前端表格控件SpreadJS
https://www.grapecity.com.cn/...

类Excel全栈解决方案：https://www.grapecity.com.cn/...