您的位置：首页 > 编程语言 > Go语言

[原创]使用 Google Chart 在线服务实现软件版本发布时间线图

2013-06-24 11:32 337 查看

引言

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 可供使用，你也不妨来看看。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航