把上次发布的一年期支出统计数据爬取了一下(数据长度是一年的,从 2011 年 8 月 1 日到 2012 年 7 月 30 日,但是有效数据是从 2012 年 2 月起才有的,之前是空白数据),就在上次发布的那个页面上,Chrome 开发工具里跑了一下,把数据复制到编辑器里了,晚上可以拿来做可视化。

表格是很简单的,去掉表头(第一行)和最后一行,剩余的是数据,没一行从左到右爬取,按顺序读取单元格内容。单元格内容都是包裹在一层 p 标签里的,取出来之后再取第一个子元素的内容就行了。

var billData = [];
for(var i = 1; i < num-1; i ++){
  var data = {};
  var trs = document.querySelectorAll('tr')[i];
  data.date = trs.children[0].children[0].innerHTML;
  data.Food=trs.children[1].children[0].innerHTML;
  data.Transportation = trs.children[2].children[0].innerHTML;
  data.Entertainment = trs.children[3].children[0].innerHTML;
  data.Clothing = trs.children[4].children[0].innerHTML;
  data.Accrssories = trs.children[5].children[0].innerHTML;
  data.Billings = trs.children[6].children[0].innerHTML;
  data.ElectronicEquip = trs.children[7].children[0].innerHTML;
  data.Family = trs.children[8].children[0].innerHTML;
  data.HealthCare = trs.children[9].children[0].innerHTML;
  data.Housing = trs.children[10].children[0].innerHTML;
  data.Education = trs.children[11].children[0].innerHTML;
  data.Sum = trs.children[12].children[0].innerHTML;
  billData.push(data);
}

我先这么跑了一遍,然后发现一个问题,源数据是最新的在最前面,而我希望最旧的数据在前面。排序本来是很简单的,但是被我那个记账的软件搞复杂了,它的格式是 dd.mm.yyyy 。后来想了一下,不需要排序的,只要把数据反转一下就行了。但是为了格式统一,我还是想把时间字符串搞标准一点。这里用了正则。

var billData = [];
for(var i = 1; i < num-1; i ++){
  var data = {};
  var trs = document.querySelectorAll('tr')[i];
  var dateStr = trs.children[0].children[0].innerHTML;
  var date = dateStr.match(/\d{4}$/)[0].toString()+'-'+dateStr.match(/\.\d{2}/)[0].replace(/\./, '').toString()+'-'+dateStr.match(/^\d{2}/)[0].toString();
  data.date = date;
  data.Food=trs.children[1].children[0].innerHTML;
  data.Transportation = trs.children[2].children[0].innerHTML;
  data.Entertainment = trs.children[3].children[0].innerHTML;
  data.Clothing = trs.children[4].children[0].innerHTML;
  data.Accrssories = trs.children[5].children[0].innerHTML;
  data.Billings = trs.children[6].children[0].innerHTML;
  data.ElectronicEquip = trs.children[7].children[0].innerHTML;
  data.Family = trs.children[8].children[0].innerHTML;
  data.HealthCare = trs.children[9].children[0].innerHTML;
  data.Housing = trs.children[10].children[0].innerHTML;
  data.Education = trs.children[11].children[0].innerHTML;
  data.Sum = trs.children[12].children[0].innerHTML;
  billData.push(data);
}

然后就很简单了,不需要排序,只需要将数组倒转就行了。