利用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 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
javascript每日必学之多态
Feb 23 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
JavaScript 异步调用
Oct 25 Javascript
webpack之devtool详解
Feb 10 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
vue实现树状表格效果
Dec 29 Vue.js
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 PDO的一些认识小结
2015/01/23 PHP
PHP加密技术的简单实现
2016/09/04 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
原生js实现弹幕效果
2020/11/29 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python网络编程详解
2017/10/31 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python实现播放和录制声音的功能
2020/08/12 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
公安学专业求职信
2014/07/27 职场文书
婚宴邀请函
2015/01/30 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS