利用Javascript仿Excel的数据透视分析功能

什么是数据透视分析?

数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图。用来发现数据的变化趋势和不同因素导致的差异。 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用。

接下来使用Excel介绍了什么是数据透视分析和数据透视表。

下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势。

申明:所有数据都是自己编造的,无任何参考价值。

Excel 数据透视表和数据透视图

这是iPhone手机在2013,2014,2015年在中国和美国的销售量。

---- 为了发现每个国家在2013,2014,2015 年不同手机销售量的变化,需要插入数据透视表,并配置数据。在这里,如果在行添加字段,就会以行分类。(先按照国家分类,然后是年份和产品);

根据配置得到数据透视表

通过数据透视表,很轻松地看到中国的销量总计和美国的销量总计。

数据透视图

根据这个图可以看出,就这几年的变化,iPhone在中国的销售量已经大幅下跌。

---- 为了观察中国和美国之间的销售差异,只需要如下配置数据面板就可以。(以产品和国家分类)

数据透视表

数据透视图

可以发现,从14年开始,iPhone手机在中国的销量开始低于美国,并且它的价格与美国之间的差异已经越来越小。

经过上面利用Excel数据透视表对iPhone手机销量的分析,我们发现Excel的Pivot 数据透视表和数据透视图,有以下好处:

从多个维度分析数据,只需要一张表,就可以从多个角度分析数据的变化。

通过任何人都会的拖拽,就可以创建动态的、总结的视图。

它对非常庞杂繁琐的数据进行加工,分析,可以帮助我们很直观地发现数据变化的趋势和差异。

报表种类丰富(柱状图,折线图),满足多种需求。

它可以进行数据过滤,以进行某些特定的分析。
好了,Excel和它的数据透视表真是太强大了!

正是由于Excel 这么强大,现在要求来了,现在要求使用Javascript 在Web端实现一模一样的功能!(我的天 -):)

使用Javascript 实现

首先用对象数组定义数据(用于关系型数据库,这里虽然是有序的,但真实的数据是无序的)

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

数据透视表

首先,我先解决数据透视表的问题。

根据上面的数据,有两种处理将数据汇总的方法(这里只是Demo,真实的代码会复杂很多)

使用常规的数据遍历方法。(完成一个排序函数,在这里就使用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排序 ...

然后根据排完序的数组进行汇总计算(循环遍历,在这里只是以年份和国家分类)

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

这是汇总的结果

好了,现在就可以根据这个数据进行制作table了(这里不再赘述)。

使用SQL语句进行数据排序和汇总

第二种方法对数据排序汇总的方法就是使用SQL.

一条语句就搞定了

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

最后就是完善界面了,通过这种方法可以做到类似的效果,一个简单的透视表就算完成了。

但是由于这个项目有很多表格,甚至不知道列标题的名字,所以上面的方法根本无法使用。

现在,通过另外一种途径来解决这个问题,刚好在Excel IO 部分已经使用过了这个插件。

通过Wijmo解决

这里展示一个用Wijmo来完成数据透视的Demo。

在第一篇 纯Javascript 实现excek IO已经介绍了它的基本使用。

数据透视表

首先将需要的包导入

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

然后根据数据实例化一个pivot面板

<div id="pivot_panel"></div>
var app = {};
app.pivotPanel = new wijmo.olap.PivotPanel('#pivot_panel');

// engine 就是这个面板的数据引擎,关联的图表会共享一个数据引擎。
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'
});

添加过滤

通过右键单击列,并选择过滤可以对列数据进行过滤。

数据透视图

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

好了,数据透视表和透视图已经完成了。

这个是Demo的完整效果。

通过Pivot 控件,这个项目的数据功能也很快完成了。

总结

以上就是这篇文章的全部内容,希望对大家的学习或者工作能有所帮助,如果疑问大家可以留言交流。

(0)

相关推荐

  • js下获取div中的数据的原理分析

    关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT 可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA中使用 document.getElementById("text").textContent 用于在

  • json格式数据分析工具PageElement类分享(仿Session写法)

    测试例: 复制代码 代码如下: PageElement pe = new PageElement();pe.LoadDataFromJsonString("[{\"A\":\"123\",\"B\":\"abc\"}]");Console.WriteLine(pe["A"]); --输出123pe["B"]=1000;Console.WriteLine(pe[&quo

  • 数据类型和Json格式分析小结

    1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如"北京"这个单独的词. 第二种类型是sequence(序列),也就是若干个相关的数据按照一定顺序并列在一起,又叫做array(数组)或List(列表),比如"北京,东京". 第三种类型是

  • Js从头学起(基本数据类型和引用类型的参数传递详细分析)

    1.基本数据类型传递参数: 复制代码 代码如下: funciton addTen(num){ num+=10; return num; } var count=20; var result=addTen(count); alert(count);//20 alert(resullt);//30 执行结果是:20和30.在这段代码中,将变量count当做参数传递给了函数addTen,也就是相当于将变量count的值复制给了函数addTen的参数.这时addTen的参数num可以看做是函数内部的一个

  • javascript多种数据类型表格排序代码分析

    中文汉字排序. 中英文混合排序. 数据大小排序. 文件类型排序(后缀名排序) 日期时间排序. 价格排序. 中文混合数字排序; 使用方法:文档载入后new tableListSort(arguments,arguments). 接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}}:对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后

  • 深入分析jquery解析json数据

    我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: 复制代码 代码如下: {"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2

  • jQuery解析json数据实例分析

    本文实例分析了jQuery解析json数据的方法.分享给大家供大家参考,具体如下: 先来看看我们的Json数据格式: [ {id:01,name:"小白",old:29,sex:"男"}, {id:02,name:"小蓝",old:29,sex:"男"}, {id:03,name:"小雅",old:29,sex:"男"} ] 为了消除乱码问题,我们设置一个过滤器(代码片段) public

  • jquery处理json数据实例分析

    一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是

  • 基于JavaScript 数据类型之Boolean类型分析介绍

    今天我们说的是数据类型中的一种Boolean类型,它返回true和false两个字面值,需要注意的是字面值是区分大小写的,也就是除了小写 其他的都只是标识符. 下面主要说的是各种数据类型以及对应的转化规则: 数据类型 转化为true的值 转化为false的值 -------------------------------------------------------------------------------- Boolean                true            

  • 利用Javascript仿Excel的数据透视分析功能

    什么是数据透视分析? 数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图.用来发现数据的变化趋势和不同因素导致的差异. 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用. 接下来使用Excel介绍了什么是数据透视分析和数据透视表. 下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势. 申明:所有数据都是自己编造的,无任何参考价值. Excel 数据透视表和数据透

  • JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h

  • 利用Python改正excel表格数据

    目录 一.前言 二.代码实现及讲解 1.模块的导入 2.获取“数据原表”中数据 3.获取生产记录更新表中的日期和材料 4.对生产数据更新表中数据的修改 5.最后,调用函数并保存数据 三.效果展示 四.结尾 一.前言 大家好,今天我来介绍我接一个Python单子.我完成这个单子前后不到2小时.首先我接到这个单子的想法是处理Excel表,在两个表之间建立联系,并通过项目需求,修改excel表中的数据.我是运用面向过程写的,将每一步都放在了不同的函数中,下面让我来介绍一下我是怎么通过自己的思路一步一步

  • JavaScript仿小米官网注册登录功能的实现

    目录 首先我们需要搭建好页面布局 JS功能1 JS功能2 JS功能3 JS功能4 效果图如下: 首先我们需要搭建好页面布局 html的代码如下: ​ <div class="contentrightbottom"> <div class="contentrightbottombox"> <div class="crbottomlogin"> <div class="login">

  • 利用PHPExcel读取Excel的数据和导出数据到Excel

    PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我们就可以用PHPExcel来快速实现.同样,如果我们要利用短信群发接口去群发信息,PHPExcel可以快速导入客户信息,避免人工录入信息的麻烦. PHPExcel使用教程: 首先下载PHPExcel 到https://github.com/PHPOffice/PHPExcel下载PHPExcel,如

  • python 用pandas实现数据透视表功能

    透视表是一种可以对数据动态排布并且分类汇总的表格格式.对于熟练使用 excel 的伙伴来说,一定很是亲切! pd.pivot_table() 语法: pivot_table(data, # DataFrame values=None, # 值 index=None, # 分类汇总依据 columns=None, # 列 aggfunc='mean', # 聚合函数 fill_value=None, # 对缺失值的填充 margins=False, # 是否启用总计行/列 dropna=True,

  • 利用JavaScript将Excel转换为JSON示例代码

    前言 JSON是码农们常用的数据格式,轻且方便,而直接手敲JSON却是比较麻烦和令人心情崩溃的(因为重复的东西很多),所以很多码农可能会和我一样,选择用Excel去输入数据,然后再想办法转换成JSON格式.今天教大家使用JS 将 Excel 转为 JSON的方法. 1.新建HTML文件 <html lang="en"> <title> Convert Excel File To JSON </title> <head> <scrip

  • C#如何操作Excel数据透视表

    一.概述 数据透视表(Pivot Table)是一种交互式的表,可以进行某些计算,如求和与计数等,可动态地改变透视表版面布置,也可以重新安排行号.列标和页字段.当改变版面布置时,数据透视表也会按照新的布置来进行更新,可以说是一个功能强大的数据分析工具.因此,本篇文章将介绍在C# 中关于Excel数据透视表的操作示例,示例内容主要包含以下要点: 1. 创建透视表 (1)创建数据缓存 (2)创建数据透视表 (3)添加行字段和列字段 (4)添加值字段 (5)设置样式 2.  设置行折叠.展开 3. 

  • C#利用Openxml读取Excel数据实例

    本文实例讲述了C#利用Openxml读取Excel数据的方法,分享给大家供大家参考.具体分析如下: 这里有些问题,如果当Cell 里面是 日期和浮点型的话,对应的Cell.DataType==Null,对应的时间会转换为一个浮点型,对于这块可以通过DateTime.FromOADate(double d)转换为时间. 可是缺点的地方就是,如果Cell.DataType ==NULL, 根本无法确认这个数据到底是 浮点型还是[被转换为了日期的浮点数].查阅了很多国外资料,的确国外博客有一部分都反映

  • 利用python对Excel中的特定数据提取并写入新表的方法

    最近刚开始学python,正好实习工作中遇到对excel中的数据进行处理的问题,就想到利用python来解决,也恰好练手. 实际的问题是要从excel表中提取日期.邮件地址和时间,然后统计在一定时间段内某个人在某个项目上用了多少时间,最后做成一张数据透视表(这是问题的大致意思). 首先要做的就是数据提取了,excel中本身有一个text to column的功能,但是对列中规律性不好的数据处理效果很差,不能分割出想要的数据,所以我果断选择用python来完成. 要用的库一个是对excel读写处理

随机推荐