初探PivotTable.js（一）

PivotTable.js

PivotTable.js 是一個Javascript 的表格數據透視插件，具有拖放功能，構建在jQuery/jQueryUI之上。源：https://github.com/nicolaskruchten/pivottable

PivotTable是做什么的？

PivotTable.js 的基礎功能是將數據集轉換為匯總表，允許用戶隨意選擇2d拖拽功能對數據進行匯總分析，非常類似於微軟Excel，支持使用額外的插件，讓表格呈現為各種Chart圖表。

PivotTable的特性：

• 輕量級（不支持Chart圖表功能）：編譯壓縮后6.3kb
• 只依賴於jQuery和jQueryUI。
• 在Chrome瀏覽器中運行速度很快，支持上萬條數據記錄。
• UI可本地化。
• 如果你不使用UI，那么就可以不依賴於jQueryUI。
• 適用於常見的輸入格式。
• 派生屬性可以通過傳入一個函數來基於整個輸入記錄動態創建。
• 可以進行復雜的函數計算，如加權平均。
• 內置了對基本熱圖和條形圖渲染器的支持，以及可選的額外渲染器，添加圖表或TSV導出支持。
• 允許聚合函數、表輸出、UI和可視化，以適應特定的應用程序。

PivotTable如何使用UI：

PivotTable.js實現了一個數據透視表拖放界面，可以將屬性拖進/拖出行/列區域，並指定呈現、聚合和過濾選項。

這是個手把手的使用教程：https://github.com/nicolaskruchten/pivottable/wiki/UI-Tutorial

PivotTable的代碼如何下載：

 通過CDNJS直接加載腳本，或者使用npm安裝腳本。如果選擇直接加載腳本，你需要：

1. 加載依賴。
2. 加載jQuery 。
3. 如果使用pivotUI()，則需要jQueryUI 。
4. 如果你使用圖表功能，你需要D3.js, C3.js或googleChart。
5. 加載PivotTable.js的靜態文件。
6. pivot.min.js

所依賴的文件和PivotTable.js可以在這里下載：

1、github下載的官方項目包里，dist目錄中。

2、從CDN網站下載，如CDNJS：https://cdnjs.com/libraries/pivottable。

PivotTable如何使用代碼：

 pivotable.js提供了兩個主要函數：pivot()和pivotUI()，它們都是依賴jQuery插件實現的，還有一堆模板。

pivot（）：

一旦你加載了jquery.js和pivot.js，就可以這樣來調用：

$("#output").pivot(
    [
        {color: "blue", shape: "circle"},
        {color: "red", shape: "triangle"}
    ],
    {
        rows: ["color"],
        cols: ["shape"]
    }
);

　　那么 $("#output")中將會渲染表格：

 

pivotUI()

只要你導入了jQueryUI，你就可以使用pivotUI()生成表格，而且還可以拖放：

$("#output").pivotUI(
    [
        {color: "blue", shape: "circle"},
        {color: "red", shape: "triangle"}
    ],
    {
        rows: ["color"],
        cols: ["shape"]
    }
);

　　效果如圖：

請注意，pivot()和pivotUI()通常采用不同的參數。

完整的參數文檔：https://github.com/nicolaskruchten/pivottable/wiki/Parameters