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


Posted in Javascript onSeptember 07, 2016

什么是数据透视分析?

数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图。用来发现数据的变化趋势和不同因素导致的差异。 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用。

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

下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势。

申明:所有数据都是自己编造的,无任何参考价值。

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

这是iPhone手机在2013,2014,2015年在中国和美国的销售量。

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

---- 为了发现每个国家在2013,2014,2015 年不同手机销售量的变化,需要插入数据透视表,并配置数据。在这里,如果在行添加字段,就会以行分类。(先按照国家分类,然后是年份和产品);

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

根据配置得到数据透视表

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

通过数据透视表,很轻松地看到中国的销量总计和美国的销量总计。

数据透视图

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

根据这个图可以看出,就这几年的变化,iPhone在中国的销售量已经大幅下跌。

---- 为了观察中国和美国之间的销售差异,只需要如下配置数据面板就可以。(以产品和国家分类)

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

数据透视表

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

数据透视图

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

可以发现,从14年开始,iPhone手机在中国的销量开始低于美国,并且它的价格与美国之间的差异已经越来越小。

经过上面利用Excel数据透视表对iPhone手机销量的分析,我们发现Excel的Pivot 数据透视表和数据透视图,有以下好处:

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

      通过任何人都会的拖拽,就可以创建动态的、总结的视图。

      它对非常庞杂繁琐的数据进行加工,分析,可以帮助我们很直观地发现数据变化的趋势和差异。

      报表种类丰富(柱状图,折线图),满足多种需求。

      它可以进行数据过滤,以进行某些特定的分析。
好了,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": 0,
  "price": 0
 }, {   
  ...
  ...
 }]

或者使用键值对

var data = {
 "2013": {
  "china": {
   "iphone": {
    "sales": 8000,
    "price": 6000
   },
   "iphone5":{
    ...
   }
  },
  "usa": {
   ...
  }
 },
 "2014": {
  ...
 }
 ...
}

数据透视表

首先,我先解决数据透视表的问题。

根据上面的数据,有两种处理将数据汇总的方法(这里只是Demo,真实的代码会复杂很多)

使用常规的数据遍历方法。(完成一个排序函数,在这里就使用Array.prototype.sort() 方法。)

data.sort(function(a, b) {
 return a.year > b.year ||
  a.country > b.country ||
  a.product > b.product ||
  a.sales > b.sales ||
  a.price > b.price ;
});

这里先按country排序,如果country相同,那就按照product排序 ...

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

var getTotal = function () {
 var total = {};
 for (var i = 0; i < json.length; i++) {
  var item = json[i];
  // 获得国家每个国家的销售总量
  total[item.country] = total[item.country] || {};
  total[item.country].sales = total[item.country].sales == undefined ?
   item.sales :
   total[item.country].sales + item.sales;

  // 每个国家不同年份的销售总额
  total[item.country][item.year] = total[item.country][item.year] == undefined ?
   item.sales :
   total[item.country][item.year] + item.sales;
 }
 var sum = 0;

 // 总销售额
 for (var key in total) {
  sum += total[key].sales;
 }
 total.sum = sum;
 return total;
};

这是汇总的结果

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

好了,现在就可以根据这个数据进行制作table了(这里不再赘述)。

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

第二种方法对数据排序汇总的方法就是使用SQL.

一条语句就搞定了

select * ,total 
from data as A,
select sum(sales) from data group by product as B 
where A.product = B.product

最后就是完善界面了,通过这种方法可以做到类似的效果,一个简单的透视表就算完成了。

但是由于这个项目有很多表格,甚至不知道列标题的名字,所以上面的方法根本无法使用。

现在,通过另外一种途径来解决这个问题,刚好在Excel IO 部分已经使用过了这个插件。

通过Wijmo解决

这里展示一个用Wijmo来完成数据透视的Demo。

在第一篇 纯Javascript 实现excek IO已经介绍了它的基本使用。

数据透视表

首先将需要的包导入

<script src="./lib/wijmo/wijmo.min.js"></script>
<script src="./lib/wijmo/wijmo.input.min.js"></script>
<script src="./lib/wijmo/wijmo.grid.min.js"></script>
<script src="./lib/wijmo/wijmo.grid.filter.min.js"></script>
<script src="./lib/wijmo/wijmo.chart.min.js"></script>
<script src="./lib/wijmo/wijmo.olap.min.js"></script>

然后根据数据实例化一个pivot面板

<div id="pivot_panel"></div>
var app = {};
app.pivotPanel = new wijmo.olap.PivotPanel('#pivot_panel');

// engine 就是这个面板的数据引擎,关联的图表会共享一个数据引擎。
var ng = app.pivotPanel.engine;
ng.itemsSource = app.collectionView;
ng.rowFields.push('国家','年份', '产品');
ng.valueFields.push('销量(台)');
ng.showRowTotals = wijmo.olap.ShowTotals.Subtotals;

下面是这段代码的效果:

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

根据pivot配置面板生成表格

<div id="pivot_grid"></div>
app.pivotGrid = new wijmo.olap.PivotGrid('#pivot_grid', {
 itemsSource: app.pivotPanel,
 showSelectedHeaders: 'All'
});

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

添加过滤

通过右键单击列,并选择过滤可以对列数据进行过滤。

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

数据透视图

app.pivotChart = new wijmo.olap.PivotChart('#pivot_chart', {
 chartType:'Column',// Bar
 itemsSource: app.pivotPanel
});

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

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

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

这个是Demo的完整效果。

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

通过Pivot 控件,这个项目的数据功能也很快完成了。

总结

以上就是这篇文章的全部内容,希望对大家的学习或者工作能有所帮助,如果疑问大家可以留言交流。

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 #Javascript
详解AngularJS中ng-src指令的使用
Sep 07 #Javascript
You might like
php 运行效率总结(提示程序速度)
2009/11/26 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
生产车间主管岗位职责
2013/12/28 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
《分一分》教学反思
2014/04/13 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
python如何读取.mtx文件
2021/04/22 Python
ES6 解构赋值的原理及运用
2021/05/25 Javascript
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫