数据透视表上线!如何在纯前端实现这个强大的数据分析功能?_葡萄城技术团队-编程思维

在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...

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

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/powertoolsteam/p/16599473.html

vue3+vite3打包组件的踩坑心得_洛晨随风-编程思维

1.再要做CDN的JS组件库文件的时候要使用   rollup-plugin-external-globals 这个插件,但是不做CDN的时候要关闭注释掉,不然引入插件后可能会报一些依赖库的全局变量未声明的错误,比如Vue  is  not defined  这样的错误, 建议再打包的时候可以用环境变量控制一下   2

如何开发一款基于 vite+vue3 的在线表格系统(下)_葡萄城技术团队-编程思维

在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容。在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建。 使用Vite初始化Vue3项目 在这里需要注意:根据官网文档说明,使用Vite需要node版本在12以上,请在创建项目前检查node版本 初始化项目命令: $ npm i

如何开发一款基于 vite+vue3 的在线表格系统(上)_葡萄城技术团队-编程思维

今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3。 Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣,众多开发者各抒己见,其中Vue以其“最简单、最易上手“的名号迅速积累了一大批粉丝,被广泛学习应用。

vuex与前端表格施展“组合拳”,实现大屏展示应用的交互增强_葡萄城技术团队-编程思维

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 下图是一个产品开发中非常常见的大屏展示界面示例。 通过Vue提供的Vuex,上方三个仪表板以及下方的表格组件共享同一个数据源,已经实现了数据改变后同步响应更新。

万物皆可集成系列:低代码释放用友深度价值(1)—系统对接集成_葡萄城技术团队-编程思维

用友U8+作为中国企业最佳经营管理平台的一个基础应用服务,在企业经营管理中得到非常广泛的使用。众所周知,用友U8+提供的基础能力可以满足企业日常管理的基本问题,但由于每个企业内部管理的方式和流程各不相同,标准的软件功能很难很好地适应所有企业的管理需要。加之,随着互联网以及移动应用的发展,通过移动端设备进行应用访问的需求

npm link 执行脚本,最后却打开了脚本文件本身的问题_洛晨随风-编程思维

在编写node 自定义的一些脚本命令的时候,使用 npm  link打开bin的执行文件,本意是要执行执行文件里面的内容,却发现最后文件本身被打开了,后来发现是要做一个声明再执行文件头部,例如:   #!/usr/bin/env node // 我们对于创建等命令的设定以及一些交互流程等都会在这个入口文件中设置 c

如何开发一款基于 vite+vue3 的在线表格系统(下)_葡萄城技术团队-编程思维

在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容。在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建。 使用Vite初始化Vue3项目 在这里需要注意:根据官网文档说明,使用Vite需要node版本在12以上,请在创建项目前检查node版本 初始化项目命令: $ npm i

如何开发一款基于 vite+vue3 的在线表格系统(上)_葡萄城技术团队-编程思维

今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3。 Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣,众多开发者各抒己见,其中Vue以其“最简单、最易上手“的名号迅速积累了一大批粉丝,被广泛学习应用。

如何在bi中增加“路线地图”并进行数据分析?_葡萄城技术团队-编程思维

随着客户的需求越来越“百变”,最近在做大屏设计的葡萄陷入了困境。 近期客户提出的需求是想在BI工具中增加 “路线地图”展示功能并进行数据分析。 不仅如此,这个“路线地图”还要兼具实用的功能与美观的动效,典型的“既要又要”系列。但是这对于我们的设计师葡萄来说,难度就有些大了。 静态图片展示不困难,可要让这地图动起来,确实

vuex与前端表格施展“组合拳”,实现大屏展示应用的交互增强_葡萄城技术团队-编程思维

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 下图是一个产品开发中非常常见的大屏展示界面示例。 通过Vue提供的Vuex,上方三个仪表板以及下方的表格组件共享同一个数据源,已经实现了数据改变后同步响应更新。

万物皆可集成系列:低代码释放用友深度价值(1)—系统对接集成_葡萄城技术团队-编程思维

用友U8+作为中国企业最佳经营管理平台的一个基础应用服务,在企业经营管理中得到非常广泛的使用。众所周知,用友U8+提供的基础能力可以满足企业日常管理的基本问题,但由于每个企业内部管理的方式和流程各不相同,标准的软件功能很难很好地适应所有企业的管理需要。加之,随着互联网以及移动应用的发展,通过移动端设备进行应用访问的需求

拒绝加班:巧用前端电子表格中构建公式树_葡萄城技术团队-编程思维

还在为满屏的公式而“内牛满面”吗?还在为长串的公式解析而发愁吗? 还在定位错误的公式而苦恼吗?上班要写代码,加班还要分析这又长又臭的公式。你的发际线还好吗? 本葡萄来拯救你的发际线啦!带来的不是洗发水,而是公式追踪!这一章,让本葡萄带你用前端电子表格的公式追踪构建公式树,快(解)速(救)分(你)析(的)公(脱)式(发