使用 Google Chart 在线服务实现软件版本发布时间线图
引言
ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，从第一次发布至今已经有超过 3 年的时间，版本也大大小小发了 80 多个。 今天想弄一个查看发布周期总体趋势的图表来，其实这个想法来自有 3 方面知识的碰撞：
- ExtAspNet 的发布版本丰富，足以形成一张不错的报表。
-
记得以前买 MackBook 时，有一个提供 Apple 系列产品发布平均周期的网站，从而预测下一次产品更新的时间， 为购买者提供参考意见。
-
Google Chart 提供了一系列生成图表的在线服务。
我们来动手
选取合适的图表类型
经过分析，我们发现 Column Chart 比较满足我们的需求。如果让横坐标表示每次的发布版本，而纵坐标表示此次版本发布距离上次的时间（天）， 则一张漂亮的图表呼之欲出。
学习官方示例
我们来学习一下官方示例：
下面是示例的完整源代码：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
这个示例按照如下流程进行：
- 动态加载 Google Chart 必须的类库，并在加载完毕后调用回调函数 drawChart
- 在 drawChart 函数中，其实在创建一个 DataTable，它拥有 3 个列，分别是年份，销售额和消费支出， 这 3 列的数据类型分别是字符串，数字和数字，然后向其中添加了 4 条数据。
- 调用 ColumnChart 的构造函数来初始化图表。
准备数据
ExtAspNet 版本发布的数据可以用一个 JSON 字符串来表示，在 JavaScript 中就是一个简单的数组。 如果从表格的角度来看，可以看作有两列，分别是版本号和发布时间：
var data = [
["v0.1 preview", "2008-04-11"],
["v0.1 preview2", "2008-04-25"],
// 此处省略 80 多条数据
["v2.3.4", "2011-05-02"],
["v2.3.5", "2011-05-09"]
]
我们可以把版本号和发布时间合并来作为横坐标，而纵坐标就是每两个版本之间的时间间隔，这可以通过简单的 JavaScript 代码来完成：
var days = (new Date(date2) - new Date(date1)) / (24 * 60 * 60 *1000)
完成版本发布时间线图
最终的代码如下：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var vs = preprocessVersions(), v, i = 0, count = vs.length, chart, data;
data = new google.visualization.DataTable();
data.addColumn('string', '版本');
data.addColumn('number', '周期');
data.addRows(count);
for(; i < count; i++) {
v = vs[i];
data.setValue(i, 0, v[1] + ' ' + v[0]);
data.setValue(i, 1, v[2]);
}
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 1200,
height: 600,
title: 'ExtAspNet 发布周期（天）',
hAxis: {
title: 'ExtAspNet 版本发布',
titleTextStyle: {
}
}
});
}
function preprocessVersions() {
var data = [
["v0.1 preview", "2008-04-11"],
["v0.1 preview2", "2008-04-25"],
// 此处省略 80 多条数据
["v2.3.5", "2011-05-09"]
];
// 初始化第一个数据
data[0][2] = 0;
var i = 1, count = data.length;
for(; i<count; i++) {
data[i][2] = (new Date(data[i][1]) - new Date(data[i-1][1])) / (24 * 60 * 60 *1000);
}
return data;
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
最终的效果图：
小结
其实很多大型网站提供了一些公共 API 可以使用，比如大家所熟知的地图服务。很多时间，我们可以利用这些资源来为自身服务，而不必要一切从头做起。 Programmableweb 网站就收集了大大小小 3200 多个 API 可供使用，你也不妨来看看。