关于前端:SpreadJS集算表联动数据透视表高效实现前端数据多维分析

2次阅读

共计 1281 个字符,预计需要花费 4 分钟才能阅读完成。

在做一些财务、供应链、资产治理等零碎时,因为业务人员线下都是采纳 Excel 来实现的,因而就须要将 Excel 中业务人员应用的性能都能在 Web 端系统实现,整体上的实现计划有三种:

  1. 齐全自研一套具备 Excel 性能的组件;
  2. 应用成品软件,例如 office 365,Wps,等;
  3. 应用类 Excel 控件;

在理论调研中发现,采纳计划一,自研老本过高,例如 Excel 中每一种公式函数的实现,跨工作表计算链路剖析等等,这些在实现上都有较大的难度。其次就是,自研零碎的操作习惯不肯定与 Excel 相似,导致后续业务人员在应用时,须要肯定的培训老本。

计划二对原有 Excel 性能不再须要研发投入,但因为软件类具备较强的封装性,而理论 Web 零碎中的业务需要又须要能结合实际的利用场景做一些定制化性能。最常见的就是表单爱护,软件类和权限对接时,最小粒度只能管制到表单级别,无奈做到管制以后用户下,不能编辑某几个单元格。软件的高封装性无奈应答零碎中大量的定制化需要。

相对来说,抉择类 Excel 控件是最完满的策略了,它不须要研发人员自研 Excel 的性能,又提供了大量的 API 反对扩大开发。

SpreadJS 是一款纯前端类 Excel 表格控件,反对前端支流框架,可轻松嵌入本人的 Web 零碎中。作为一款类 Excel 表格控件,SpreadJS 人造具备 Excel 的大部分性能,例如数据验证、条件格局、图形图表、公式函数、透视表等等。除此之外,为了便于 Web 零碎的数据设置和提取,SpreadJS 也提出了数据绑定及集算表等形式,来简化开发成本。本文围绕数据设置及剖析,整合 SpreadJS 中集算表及数据透视表性能,提供一种纯前端高效能数据多维分析计划。

SpreadJS 与框架集成形式可参考上面的文章:

  1. Vue 集成 SpreadJS;
  2. React 集成 SpreadJS。

Web 零碎中,要对数据做剖析解决,首先须要将要做剖析解决的数据查问到前端。SpreadJS 中,集算表是一个具备网状行为和电子表格用户界面的疾速数据绑定视图,能够对接具体的 API 接口,实现数据的增删改查。API 层面实现可参考学习指南 - 集算表,UI 层面的操作能够参考上面的视频教程:

  1. 集算表数据主动同步;
  2. 集算表数据批量提交。

本文偏重做数据分析,能够临时只关注集算表数据查问接口,SpreadJS 在线体验地址中,创立集算表时,提供了默认的数据查问接口。本文中,测试接口由 Postman 模仿生成,对应的接口为“https://9a288081-e4c6-4468-82…”,返回数据字段为“list”, 创立集算表的过程如下:

创立完集算表之后,自身集算表就具备肯定的剖析统计能力,能够通过分组,求和函数来实现局部数据分析与统计:

但这种数据统计分析如果绝对数据透视图来说,设置形式稍微简单,并且与 Excel 应用形式并不统一,对业务人员来说,存在肯定的挑战。咱们能够将集算表用来做数据展现的快捷伎俩,后续的数据分析仍然借助生成透视表来实现,SpreadJS 基于计算表,可间接创立数据透视表:

应用这种计划,咱们就能够疾速的对接数据,在纯前端的环境下实现数据分析及统计需要。

正文完
 0