前端數據魔法：解析數據透視功能實現

前言

在信息爆炸的時代，數據扮演着關鍵的角色。從龐大的數據中提取有用的信息並進行有效地分析，是一項充滿挑戰的任務。爲了應對這個挑戰，數據透視表這一工具應運而生。它通過重新排列和組合數據，使得原始數據更易於理解和分析。數據透視表的核心思想是通過改變數據的排列方式，揭示數據之間的關係，爲分析和可視化提供支持，以及支持更深入的決策和洞察。在本文中，小編將爲大家介紹如何在Web端構建數據透視表，以便幫助大家更好地理解和分析數據，並從數據中獲得有價值的信息。

什麼是數據透視表

數據透視表（Pivot Table）是一種數據分析工具，用於對大量數據進行彙總、分類和計算，以便更好地理解和分析數據。它可以將原始數據按照不同的維度進行分類，並進行彙總、計算和分析，以便從數據中挖掘出有用的信息和洞察。

數據透視表通常以表格的形式呈現，其中包含行、列和值三個主要部分。通過將數據字段拖放到透視表的行和列區域，可以將數據按照不同的維度進行分類和分組。而將數據字段拖放到值區域，可以對數據進行彙總、計算和統計，如求和、平均值、計數等。

例如，在下面的數據透視表中，值“17.1”來自對數據記錄按人羣和年進行分組後，人羣爲“Black female”以及年份爲“2005”的記錄中統計的吸菸人數。

在Web端開發數據透視表的思路

在Web端開發數據透視表的思路可以按照以下步驟進行：

前端加載完整的原始數據或字段列表：前端需要獲取到要進行數據透視表分析的原始數據或字段列表。這可以通過後端API請求或直接加載靜態數據來實現。
用戶UI操作選擇數據維度：在前端的用戶界面上，提供給用戶選擇要作爲行和列維度的數據。這可以通過下拉菜單、複選框或拖放等交互方式實現。
前端數據引擎進行數據分析：根據用戶選擇的數據維度，前端數據引擎會對原始數據進行相應的分析和計算，生成透視表結果。這可能涉及聚合函數、過濾條件和排序等操作。
展示和美化透視表結果：將生成的透視表結果展示給用戶，可以使用表格、圖表或其他可視化方式。同時，對結果進行美化，如調整樣式、添加交互功能或增加數據標籤等，以提升用戶體驗和可視化效果。

開發前需要考慮的問題

在開發數據透視表功能前，需要考慮以下問題：

交互性：設計一個直觀且易操作的前端可視化界面，讓用戶能夠輕鬆地設置透視表的行、列、值等參數。用戶應能夠自由更改水平和垂直維度，並進行其他統計項的設置，以生成動態的透視表結果。
性能：數據透視表涉及大量數據的分組和統計運算，對於大規模數據，性能是一個關鍵問題。實現高性能的透視分析引擎，考慮瀏覽器內存和CPU消耗限制，確保能夠快速生成結果。
數據分析結果的後續使用：爲了方便用戶進行後續的數據分析和決策，可以配合圖表來展示透視表的分析結果。同時，提供導出和推送透視表格和圖表結果的功能也很重要。
兼容性：考慮到很多用戶在傳統行業中使用Excel進行數據分析，與Excel透視表的兼容性是一個需要考慮的問題。確保能夠兼容和導入Excel中的透視表數據。
動態更新：如果原始數據是動態更新或增量更新的，透視表的結果也需要同步動態更新，保持數據的實時性和準確性。
後端數據引擎：對於性能和動態更新需求較高的場景，考慮將數據分析環節放到後端進行處理。前端僅負責用戶輸入參數和展示更新透視表結果，利用後端的軟硬件優勢提升性能和效率。

基於Vue+Springboot實現數據透視表

這裏小編藉助葡萄城公司的純前端表格控件SpreadJS（Vue版）+服務端表格組件GcExcel（Java版）來實現，在介紹代碼前，我們先簡單的看一下實現的數據透視表功能整體流程：

綁定數據：前臺界面綁定後端傳輸過來的JSON數據，生成原始的數據表格。這裏加載了1W條數據的銷售記錄表。
通過組件提供數據透視表功能，創建數據透視表，並將透視面板集成到數據分析界面，讓用戶可以自己選擇行列維度字段，以及用於統計計算的值字段。可以看到除了我們需要的基礎功能外，也提供了透視結果視圖的保存。能將用戶設定的參數集合存儲爲固定的視圖。
透視組件創建的數據透視表可以動態展示透視結果。
以透視結果創建一個常見的圖表，更直觀的供用戶繼續對比分析。

透視結果生成後，隨着後端傳輸過來的原始數據的更新，透視結果以及圖表也會同步更新，具體實現效果如下圖所示：

下面介紹Demo的實現過程：

環境準備：

VsCode，IDEA，Node.js

代碼：

vue3-spread-ts.zip

GCExcelAndSpreadJS_Service.zip

實現過程

第一步：下載代碼到本地。

第二步：用VsCode打開前臺代碼文件（vue3-spread-ts.zip）並下載依賴（npm install），用IDEA打開服務端代碼文件並加載Maven依賴。

第三步（最後一步）：前臺代碼和服務端代碼下載完依賴後啓動項目。

通過以上三步就可以在本地電腦實現一個簡單的數據透視表，下面是使用到的部分重要代碼：

前臺代碼（Vue）：

///1.通過編輯器UI界面設計空模板，創建對應的數據綁定關係以及透視表，圖表


///2.更新數據源表，以及自動更新數據透視表和圖表
let spread:GC.Spread.Sheets.Workbook = designer.getWorkbook() as GC.Spread.Sheets.Workbook
spread.suspendPaint();
//從後端獲取最新的數據源
let data:any = await httpUtils.post("spread/getData");

//更新web端的原始記錄表作爲新數據源
spread.getSheet(0).setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data));
let pt=spread.getSheet(1).pivotTables.all()[0];

//更新數據透視表
pt.updateSource();

var range=pt.getRange().content;
console.log(range);

//根據數據透視結果更新圖表
spread.getSheet(1).charts.all()[0].dataRange(GC.Spread.Sheets.CalcEngine.rangeToFormula(range));
spread.setActiveSheet("Sheet2");
spread.resumePaint();

//根據數據透視結果後續做其他使用

服務端代碼（Java）：

（1）生成數據透視表

@CrossOrigin
@RequestMapping(value = "/generateChart", method = RequestMethod.POST)
//生成數據透視表
public String generateChart(@RequestParam(value = "path", required = true) String filename) throws FileNotFoundException {
    String filePath ="D:\\Product\\Spreadjs\\Demo\\\u65B0\u5EFA\u6587\u4EF6\u5939\\GCExcelAndSpreadJS_Service\\template\\"+filename;
    try {
        String workbookJSON;
        Workbook workbook = new Workbook();
        workbook.open(filePath);
        IWorksheet sheet= workbook.getWorksheets().get(0);

        ArrayList<Record> records=getsourceData(100);
        SalesData data=new SalesData();
        data.records=records;
        sheet.setDataSource(data);
        IRange range= sheet.getTables().get(0).getRange();
        IPivotTable pivot= workbook.getWorksheets().get(1).getPivotTables().get(0);
        pivot.setRowGrand(false);
        pivot.setColumnGrand(false);
        pivot.getPivotCache().setSourceData(range);
        IRange range1= pivot.getTableRange2();
        range1=workbook.getWorksheets().get(1).getRange(range1.getRow()+1, range1.getColumn(), range1.getRowCount()-1, range1.getColumnCount());
        workbook.getWorksheets().get(1).getShapes().get(0).getChart().setSourceData(range1);
        pivot.refresh();
        workbook.save("123.xlsx");
        //這裏可以獲取到透視表的數據，來傳給前端
        pivot.getTableRange2().getValue();

        return "後端生成成功";
    } catch (Exception e) {
        e.printStackTrace();
    }
 
    return "失敗";
}

（2）加載數據模板

@CrossOrigin
@RequestMapping(value = "/loadTemplate", method = RequestMethod.POST)
public String loadTemplate(@RequestParam(value = "path", required = true) String filename) {
    String filePath ="D:\\Product\\Spreadjs\\Demo\\\u65B0\u5EFA\u6587\u4EF6\u5939\\GCExcelAndSpreadJS_Service\\template\\"+filename;
    try {
        String workbookJSON;
        Workbook workbook = new Workbook();
        workbook.open(filePath);
        workbookJSON = workbook.toJson();
        return workbookJSON;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return "0";
}

（3）獲取數據

@CrossOrigin
@RequestMapping(value = "/getData", method = RequestMethod.POST)
public String getData() throws FileNotFoundException {
    ArrayList<Record> records=getsourceData(100);
    SalesData data=new SalesData();
    data.records=records;
    Gson gson = new Gson();
    String jsonstr = gson.toJson(data); 
    return jsonstr;
}

public ArrayList<Record> getsourceData(int count) {
    ArrayList<Record> records=new ArrayList<Record>();
    String[] cars=new String[]{"奧迪","寶馬","福特","比亞迪","特斯拉"};
    String[] sales=new String[]{"張三","李四","王五","傑克","姜宇"};
    Random r=new Random();
    for (int i = 0; i < count; i++) {
      records.add(new Record(new Date(), sales[r.nextInt(5)],cars[r.nextInt(5)],r.nextInt(100),r.nextFloat()*10000+5000));
    }
    return records;
}

總結

以上就是在Web端實現一個數據透視表的全過程，如果您想了解更多有關於數據透視表的更多信息，歡迎點擊這裏查看。

擴展鏈接：

Redis從入門到實踐

一節課帶你搞懂數據庫事務！

Chrome開發者工具使用教程

如何在Web應用中添加一個JavaScript Excel查看器

高性能渲染——詳解HTML Canvas的優勢與性能