利用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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
electron踩坑之dialog中的callback解决
Oct 06 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 作用域解析运算符(::)
2010/07/27 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript制作2048游戏
2015/03/30 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python+requests接口自动化框架的实现
2020/08/31 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
优秀英文求职信范文
2015/03/19 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis