用Javascript模仿Excel的数据透视分析功能

什么是数据透视分析？

数据透视分析是对数据进行不同维度的汇总、过滤、分析、比较和绘制。用于发现数据的趋势以及不同因素造成的差异。这在销售、统计、财务等方面非常有用，经常用在一些管理软件中。

接下来用Excel介绍什么是透视表分析和透视表。

接下来，我用Excel透视表分析了2013年、2014年、2015年iPhone在中国和美国的销售数据，从而总结出iPhone的销售趋势。

肯定：所有数据都是我们自己编造的，没有参考价值。

Excel数据透视表和数据透视图报表

这是2013年、2014年和2015年iPhone在中国和美国的销量。

-为了找出2013年、2014年、2015年各国不同手机销量的变化，需要插入一个透视表，配置数据。这里，如果一个字段被添加到一行，它将按行分类。(首先按国家分类，然后按年份和产品分类)；

根据配置获取透视表

通过透视表，很容易看到中国的总销量和美国的总销量。

数据视角

根据这个数字可以看出，近年来iPhone在中国的销量大幅下滑。

要观察中国和美国的销售差异，您只需要按如下方式配置数据面板。(按产品和国家分类)

数据透视表

数据视角

可以发现，从14年开始，iPhone在中国的销量开始低于美国，价格与美国的差距越来越小。

通过以上Excel透视表对iPhone销量的分析，我们发现Excel透视表和透视表图表有以下优势：

要从多个维度分析数据，只需要一个表就可以从多个角度分析数据变化。

任何人都可以通过拖放来创建动态摘要视图。

它可以处理和分析非常复杂的数据，可以帮助我们直观地发现数据变化的趋势和差异。

报表有很多种(柱状图、折线图)，满足各种需求。

它可以过滤数据进行一些特定的分析。嗯，Excel和它的透视表太强大了！

正是因为Excel功能强大，所以现在才需要，现在又需要用Javascript在Web端实现同样的功能！(我的上帝-):)

使用Javascript实现

首先，数据由对象数组定义(用于关系数据库，虽然这里是有序的，但是真正的数据是无序的)

var json=[{ 'year': 2013，' country': 'usa '，' product': 'iphone 5 '，' sales': 8000 '，' price': 6000 }，{ 'year': 2013，Country' :' USA '，' product' :' iPhone 6 '，' sales ' 3:' price ' 33: }，}.}]或使用键值对

vardata={ ' 2013 ' : { ' China ' : { ' iPhone ' : { ' Sales ' : 8000，' Price' : 6000}，' iPhone 5' : {.}}，美国：

首先我来解决透视表的问题。

根据上面的数据，总结数据有两种方式(这里只是Demo，真正的代码会复杂很多)

使用传统的数据遍历方法。(要完成排序函数，请在这里使用Array.prototype.sort()方法。)

data.sort(函数(a，b){ return a . year b . year | | a . country b . country | | a . product b . product | | a . sales b . sales | | a . price b . price；});这里，先按国家排序，如果国家相同，则按产品排序.

然后根据排序后的数组进行汇总计算(循环遍历，这里只按年份和国家分类)

var getTotal=function(){ var total={ }；for(var I=0；i json.lengthI){ var item=JSON[I]；//获取每个国家的总销量合计[项。国家]=总计[项目]。国家]| | { }；总计[项目.国家]。销售额=总额[项目.国家]。销售额==未定义？item . sales : total[item . country]。销售项目。//各国不同年份的销售总额合计[项。国家][项目。年份]=总计[项目。国家][项目。年份]==未定义？item . sales : total[item . country][item . year]item . sales；} var sum=0；//的总销售额(var关键字合计){sum=total [key]。销售；} total.sum=sum退货总额；};这是总结的结果

好了，现在你可以根据这个数据做一个表格了(这里我就不赘述了)。

使用SQL语句对数据进行排序和汇总

对数据进行排序和汇总的第二种方法是使用SQL。

一句话就搞定了

选择*，从数据a中选择总计，从按产品分组的数据中选择总和(销售额)作为b，其中a. product=b. product将最终改善界面。这种方法也可以达到类似的效果，完成了一个简单的透视表。

但是，由于这个项目中有很多表，甚至列标题的名称都是未知的，所以上述方法根本无法使用。

现在，有另一种方法可以解决这个问题，这个插件刚刚在Excel IO中使用。

由Wijmo解决

这是一个使用Wijmo完成数据透视的演示。

在第一篇文章中，纯Javascript实现EXECKIO介绍了它的基本用法。

数据透视表

首先导入所需的包

脚本src='http:/lib/wijmo/wijmo . min . js '/script script src=' http :/lib/wijmo/wijmo . input . min . js '/script script src=' http :/lib/wijmo/wijmo . grid . min . js '/script script src=' http :/lib/wijmo/wijmo . grid . filter . min . js '/script script src=' http :/lib/wijmo/wijmo . chart . min . js '/Script src=' http :/lib/wijmo/wijmo . OLAP . min . js '/脚本然后根据数据实例化一个透视面板

div id=' pivot _ panel '/div var app={ }；app . PivotPanel=new wijmo . OLAP . PivotPanel(# pivot _ panel ')；//引擎是这个面板的数据引擎，相关的图表会共享一个数据引擎。var ng=app . PivotPanel . engine；ng . items source=app . collectionview；Ng.rowFields.push('国家'，'年'，'产品')；Ng.valueFields.push('销量(单位)')；ng . ShowRowTotals=wijmo . OLAP . ShowTotals .小计；下面是这段代码的效果：

基于透视配置面板生成表

div id=' pivot _ grid '/divapp . pivot grid=new wijmo . OLAP . pivot grid(' # pivot _ grid '，{ items source : app . pivot panel，showselectedheaders : ' All ' })；

添加过滤器

您可以通过右键单击列并选择筛选来筛选列数据。

数据视角

app .枢纽分析图=new wijmo.olap .枢纽分析图(' #pivot_chart '，{ chartType:'Column '，//Bar items source : app . pivot panel })；

好了，数据透视表和透视图已经完成。

这就是Demo的完整效果。

通过Pivot控件，本项目的数据功能也快速完成。

摘要

以上就是本文的全部内容。希望对大家的学习或工作有所帮助。有问题可以留言交流。