什么是數(shù)據透視分析？

數(shù)據透視分析就是要在 不同維度對數(shù)據進行匯總，過濾，分析，比較，作圖。用來發(fā)現(xiàn)數(shù)據的變化趨勢和不同因素導致的差異。 這在銷售，統(tǒng)計，金融 等方面十分有用，常常會在一些管理軟件中使用。

接下來使用Excel介紹了什么是數(shù)據透視分析和數(shù)據透視表。

下面我使用 Excel的數(shù)據透視表 來分析 iPhone手機2013，2014 和2015 年在中國和美國的銷售量數(shù)據，以總結iPhone手機的銷售趨勢。

申明：所有數(shù)據都是自己編造的，無任何參考價值。

Excel 數(shù)據透視表和數(shù)據透視圖

這是iPhone手機在2013，2014，2015年在中國和美國的銷售量。

---- 為了發(fā)現(xiàn)每個國家在2013，2014，2015 年不同手機銷售量的變化，需要插入數(shù)據透視表，并配置數(shù)據。在這里，如果在行添加字段，就會以行分類。(先按照國家分類，然后是年份和產品)；

根據配置得到數(shù)據透視表

通過數(shù)據透視表，很輕松地看到中國的銷量總計和美國的銷量總計。

數(shù)據透視圖

根據這個圖可以看出，就這幾年的變化，iPhone在中國的銷售量已經大幅下跌。

---- 為了觀察中國和美國之間的銷售差異，只需要如下配置數(shù)據面板就可以。(以產品和國家分類)

數(shù)據透視表

數(shù)據透視圖

可以發(fā)現(xiàn)，從14年開始，iPhone手機在中國的銷量開始低于美國，并且它的價格與美國之間的差異已經越來越小。

經過上面利用Excel數(shù)據透視表對iPhone手機銷量的分析，我們發(fā)現(xiàn)Excel的Pivot 數(shù)據透視表和數(shù)據透視圖，有以下好處：

      從多個維度分析數(shù)據，只需要一張表，就可以從多個角度分析數(shù)據的變化。

      通過任何人都會的拖拽，就可以創(chuàng)建動態(tài)的、總結的視圖。

      它對非常龐雜繁瑣的數(shù)據進行加工，分析，可以幫助我們很直觀地發(fā)現(xiàn)數(shù)據變化的趨勢和差異。

      報表種類豐富（柱狀圖，折線圖），滿足多種需求。

      它可以進行數(shù)據過濾，以進行某些特定的分析。
好了，Excel和它的數(shù)據透視表真是太強大了！

正是由于Excel 這么強大，現(xiàn)在要求來了，現(xiàn)在要求使用Javascript 在Web端實現(xiàn)一模一樣的功能!（我的天 -):）

使用Javascript 實現(xiàn)

首先用對象數(shù)組定義數(shù)據（用于關系型數(shù)據庫,這里雖然是有序的，但真實的數(shù)據是無序的）

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

數(shù)據透視表

首先，我先解決數(shù)據透視表的問題。

根據上面的數(shù)據，有兩種處理將數(shù)據匯總的方法（這里只是Demo，真實的代碼會復雜很多）

使用常規(guī)的數(shù)據遍歷方法。（完成一個排序函數(shù)，在這里就使用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排序 ...

然后根據排完序的數(shù)組進行匯總計算(循環(huán)遍歷,在這里只是以年份和國家分類)

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

這是匯總的結果

好了，現(xiàn)在就可以根據這個數(shù)據進行制作table了（這里不再贅述）。

使用SQL語句進行數(shù)據排序和匯總

第二種方法對數(shù)據排序匯總的方法就是使用SQL.

一條語句就搞定了

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

最后就是完善界面了，通過這種方法可以做到類似的效果，一個簡單的透視表就算完成了。

但是由于這個項目有很多表格，甚至不知道列標題的名字，所以上面的方法根本無法使用。

現(xiàn)在，通過另外一種途徑來解決這個問題，剛好在Excel IO 部分已經使用過了這個插件。

通過Wijmo解決

這里展示一個用Wijmo來完成數(shù)據透視的Demo。

在第一篇 純Javascript 實現(xiàn)excek IO已經介紹了它的基本使用。

數(shù)據透視表

首先將需要的包導入

<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>

然后根據數(shù)據實例化一個pivot面板

<div id="pivot_panel"></div>

var app = {};
app.pivotPanel = new wijmo.olap.PivotPanel('#pivot_panel');

// engine 就是這個面板的數(shù)據引擎，關聯(lián)的圖表會共享一個數(shù)據引擎。
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'
});

添加過濾

通過右鍵單擊列，并選擇過濾可以對列數(shù)據進行過濾。

數(shù)據透視圖

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

好了，數(shù)據透視表和透視圖已經完成了。

這個是Demo的完整效果。

通過Pivot 控件，這個項目的數(shù)據功能也很快完成了。

總結

以上就是這篇文章的全部內容，希望對大家的學習或者工作能有所幫助，如果疑問大家可以留言交流。

最新評論