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

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

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

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

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

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

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

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

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

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

數(shù)據(jù)透視圖

根據(jù)這個(gè)圖可以看出，就這幾年的變化，iPhone在中國的銷售量已經(jīng)大幅下跌。

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

數(shù)據(jù)透視表

數(shù)據(jù)透視圖

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

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

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

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

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

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

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

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

使用Javascript 實(shí)現(xiàn)

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

 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ù)據(jù)透視表

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

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

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

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

var getTotal = function () { var total = {}; for (var i = 0; i < json.length; i++) {  var item = json[i];  // 獲得國家每個(gè)國家的銷售總量  total[item.country] = total[item.country] || {};  total[item.country].sales = total[item.country].sales == undefined ?   item.sales :   total[item.country].sales + item.sales;  // 每個(gè)國家不同年份的銷售總額  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;};

這是匯總的結(jié)果

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

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

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

一條語句就搞定了

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

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

但是由于這個(gè)項(xiàng)目有很多表格，甚至不知道列標(biāo)題的名字，所以上面的方法根本無法使用。

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

通過Wijmo解決

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

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

數(shù)據(jù)透視表

首先將需要的包導(dǎo)入

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

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

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

var app = {};app.pivotPanel = new wijmo.olap.PivotPanel('#pivot_panel');// engine 就是這個(gè)面板的數(shù)據(jù)引擎，關(guān)聯(lián)的圖表會共享一個(gè)數(shù)據(jù)引擎。var ng = app.pivotPanel.engine;ng.itemsSource = app.collectionView;ng.rowFields.push('國家','年份', '產(chǎn)品');ng.valueFields.push('銷量（臺）');ng.showRowTotals = wijmo.olap.ShowTotals.Subtotals;

下面是這段代碼的效果：

根據(jù)pivot配置面板生成表格

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

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

添加過濾

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

數(shù)據(jù)透視圖

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

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

這個(gè)是Demo的完整效果。

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

總結(jié)

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