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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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 。后来想了一下，不需要排序的，只要把数据反转一下就行了。但是为了格式统一，我还是想把时间字符串搞标准一点。这里用了正则。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

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

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