数据可视化--折线图

一. 数据可视化的好处

比如下面这是服务器一段时间采集到的log日志：

[log] {"timestamp" : "2013-08-30 13:45:42 UTC", "ping" : 32ms}
[log] {"timestamp" : "2013-08-30 13:55:46 UTC", "ping" : 132ms}
[log] {"timestamp" : "2013-08-30 14:05:49 UTC", "ping" : 2ms}
[log] {"timestamp" : "2013-08-30 14:15:40 UTC", "ping" : 82ms}
[log] {"timestamp" : "2013-08-30 14:25:43 UTC", "ping" : 32ms}
[log] {"timestamp" : "2013-08-30 15:55:12 UTC", "ping" : 112ms}
...

如何才能更直观的看出服务器当前的网络状况？ 一个几M的纯文本log靠人工的肉眼是很难发现其中的规律的！换一种形式：

我们就能很直观的看到服务器当前时间段的网络延迟状况！

二. 如何做到数据的可视化

从上图可以看到，实现数据的可视化–折线图；有几个组成部分：纵坐标 + 横坐标！重点在于我们如何从一组数据中知道一个合理的分组方式，以及数据的分组间隔？

需要理解下面的基本基本数学原理。

1.纵坐标代表数据的离散值

怎样反映一组数据的离散值？极差，方差，标准差…等等都可以表示一组数据的离散程度，具体每种方式 的原理可以通过google了解到！然后这里主要讲解利用标准差来判定一组数据的离散程度。

知道了数据的离散程度，我们能做什么？没错，就是纵坐标的分组大小！有这么一个基本原则”数据越集中，则分组可尽量的少； 数据越分散，则分组应更多！”, 那么，除了知道数据的离散程度以外，我们还必须得到一个度量来量化一组数据距离的离散值–相对标准差。

知道了基本的原理，实现过程就比较简单了：首先计算出当前组数据的相对标准差，然后根据相对标准差的取值来决定纵轴分组的大小 ；最后就是画图！

2.横轴代表这些离散数组发生的时间点

当然假设横轴的长度是一定的情况，则肯定存在数组显示不完全的情况。故我们还需要设计一个算法 来根据数据的时间范围决定横轴的分组大小。

举个简单的例子：假设我们图标的横轴只能显示10给数据，首先我们以1s为间隔进行横轴分组，当时间范围增加到10s的时候数据不能继续显示； 然后就需要动态增加量程，比如到2s，然后在有限的区域内我们又可以更多的展示一些数据…依次重复下去，直到分组间隔达到59s的时候秒为 单位的间隔已经无法满足我们的需要，替换量程为分钟。从1min开始直到59min再替换为小时…以此类推！

效果图：

三. 具体代码实现(actionscript) & Demo

github项目