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

 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": {
  ...
 }
 ...
}

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 ;
});

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 "text-align: center">

好了，现在就可以根据这个数据进行制作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="/UploadFiles/2021-04-02/wijmo.min.js">

然后根据数据实例化一个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;


下面是这段代码的效果：

根据pivot配置面板生成表格




<div id="pivot_grid"></div>




app.pivotGrid = new wijmo.olap.PivotGrid('#pivot_grid', {
 itemsSource: app.pivotPanel,
 showSelectedHeaders: 'All'
});



添加过滤


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

数据透视图




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




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


这个是Demo的完整效果。

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


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