前端数据魔法:解析数据透视功能实现

原创
01/15 09:14
阅读数 70

前言

在信息爆炸的时代,数据扮演着关键的角色。从庞大的数据中提取有用的信息并进行有效地分析,是一项充满挑战的任务。为了应对这个挑战,数据透视表这一工具应运而生。它通过重新排列和组合数据,使得原始数据更易于理解和分析。数据透视表的核心思想是通过改变数据的排列方式,揭示数据之间的关系,为分析和可视化提供支持,以及支持更深入的决策和洞察。在本文中,小编将为大家介绍如何在Web端构建数据透视表,以便帮助大家更好地理解和分析数据,并从数据中获得有价值的信息。

什么是数据透视表

数据透视表(Pivot Table)是一种数据分析工具,用于对大量数据进行汇总、分类和计算,以便更好地理解和分析数据。它可以将原始数据按照不同的维度进行分类,并进行汇总、计算和分析,以便从数据中挖掘出有用的信息和洞察。

数据透视表通常以表格的形式呈现,其中包含行、列和值三个主要部分。通过将数据字段拖放到透视表的行和列区域,可以将数据按照不同的维度进行分类和分组。而将数据字段拖放到值区域,可以对数据进行汇总、计算和统计,如求和、平均值、计数等。

例如,在下面的数据透视表中,值“17.1”来自对数据记录按人群和年进行分组后,人群为“Black female”以及年份为“2005”的记录中统计的吸烟人数。

在Web端开发数据透视表的思路

在Web端开发数据透视表的思路可以按照以下步骤进行:

  1. 前端加载完整的原始数据或字段列表:前端需要获取到要进行数据透视表分析的原始数据或字段列表。这可以通过后端API请求或直接加载静态数据来实现。
  2. 用户UI操作选择数据维度:在前端的用户界面上,提供给用户选择要作为行和列维度的数据。这可以通过下拉菜单、复选框或拖放等交互方式实现。
  3. 前端数据引擎进行数据分析:根据用户选择的数据维度,前端数据引擎会对原始数据进行相应的分析和计算,生成透视表结果。这可能涉及聚合函数、过滤条件和排序等操作。
  4. 展示和美化透视表结果:将生成的透视表结果展示给用户,可以使用表格、图表或其他可视化方式。同时,对结果进行美化,如调整样式、添加交互功能或增加数据标签等,以提升用户体验和可视化效果。

开发前需要考虑的问题

在开发数据透视表功能前,需要考虑以下问题:

  1. 交互性:设计一个直观且易操作的前端可视化界面,让用户能够轻松地设置透视表的行、列、值等参数。用户应能够自由更改水平和垂直维度,并进行其他统计项的设置,以生成动态的透视表结果。
  2. 性能:数据透视表涉及大量数据的分组和统计运算,对于大规模数据,性能是一个关键问题。实现高性能的透视分析引擎,考虑浏览器内存和CPU消耗限制,确保能够快速生成结果。
  3. 数据分析结果的后续使用:为了方便用户进行后续的数据分析和决策,可以配合图表来展示透视表的分析结果。同时,提供导出和推送透视表格和图表结果的功能也很重要。
  4. 兼容性:考虑到很多用户在传统行业中使用Excel进行数据分析,与Excel透视表的兼容性是一个需要考虑的问题。确保能够兼容和导入Excel中的透视表数据。
  5. 动态更新:如果原始数据是动态更新或增量更新的,透视表的结果也需要同步动态更新,保持数据的实时性和准确性。
  6. 后端数据引擎:对于性能和动态更新需求较高的场景,考虑将数据分析环节放到后端进行处理。前端仅负责用户输入参数和展示更新透视表结果,利用后端的软硬件优势提升性能和效率。

基于Vue+Springboot实现数据透视表

这里小编借助葡萄城公司的纯前端表格控件SpreadJS(Vue版)+服务端表格组件GcExcel(Java版)来实现,在介绍代码前,我们先简单的看一下实现的数据透视表功能整体流程:

  1. 绑定数据:前台界面绑定后端传输过来的JSON数据,生成原始的数据表格。这里加载了1W条数据的销售记录表。

  2. 通过组件提供数据透视表功能,创建数据透视表,并将透视面板集成到数据分析界面,让用户可以自己选择行列维度字段,以及用于统计计算的值字段。可以看到除了我们需要的基础功能外,也提供了透视结果视图的保存。能将用户设定的参数集合存储为固定的视图。

  3. 透视组件创建的数据透视表可以动态展示透视结果。

  4. 以透视结果创建一个常见的图表,更直观的供用户继续对比分析。

透视结果生成后,随着后端传输过来的原始数据的更新,透视结果以及图表也会同步更新,具体实现效果如下图所示:

下面介绍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的优势与性能

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部