绘制海量文件数据

　　你将使用igDataChart在浏览器中绘制海量文件数据。如果我们告诉可以在JavaScript图标中绘制一百万个数据点，你会相信吗？不相信？接下来你将会做到这一点。实际上，绘制如此大量的数据将证明这比通过网络将数据传输到客户端的难度要小。
　　JSON是非常棒的。它是可供人们阅读的，因此它的反序列化在任何正式的JavaScript引擎中都得到了良好的支持，但是它确实有一点冗长。它绝对不像XML那样冗长，但是与紧密的二进制格式相比仍然要冗长得多。
　　从传统上将，浏览器并不十分擅长处理JavaScript中的二进制数据，但是在ArrayBuffer API出现之后，最近的版本已经开始得到了改善。加载海量数据的策略是：使用Node.js编码出一个包含了一百万个单精度浮点数的紧密二进制文件。得到了该文件之后，使用XmlHTTPRequest将它加载到一个ArrayBuffer中，然后在客户端使用Data View将浮点数解压成一个数组。
　　该代码将创建一个Node.js Buffer，它足以存储一百万个单精度浮点数。一个单精度浮点数通常使用4个字节进行编码，所以缓冲区需要有400万字节长。提供了这样一个缓冲区之后，代码清单中的代码将为每个数据点调用writeFloatLE幻术将每个浮点数值输出到缓冲区中，使用小端字节顺序。得到了这个填充后的缓冲区之后，通过之前使用的Node.js的fs.writeFile函数，可以将该缓冲区写入到磁盘中作为文件的内容。这将生成一个称为data.bin的文件，其中包含了一百万个数据点。
　　如果创建了一个名为createMassData.js的文件，并使用代码清单的内容填充它，你应该能够浏览包含该文件的目录，并从Node.js的命令提示符运行下面的命令（该文件在合作站点中的名称为createMassData.js）。
　　结果，你将生成一个输出文件data.bin，它的大小应该为3907KB。这个文件很大，但是远不及使用JSON编码的数据那样大。运行该代码将生成一个文件data.json，它的内容与data.bin文件相同，但使用的编码格式是JSON。该文件最终的大小是18166KB。这个大小超过了二进制编码版本的4.5倍。如果使用gzip压缩该文件，那么它们的大小将缩小为下列值。
　　可以预见的是，普通JSON文件在压缩中受益更多，但是压缩后的二进制文件仍然要比对等的压缩JSON文件小得多。不过，可以看到在Web应用中使用大量JSON的可行性，如我们今天所实现的，这极大地依赖于它能否进行很好的压缩，而Web服务器和浏览器通常可以无缝地对文件进行压缩和解压，并且不会为请求添加太多额外的处理开销。不过，当处理海量数据时，每个字节都非常重要。
　　在获得了含有一百万个数据点的二进制文件后，剩下的挑战就是如何将这些数据抓取到浏览器中，并加载到图表中。现代浏览器含有一些API可以帮助下载和处理原生级别的数据，但其中一些出现的太晚，所以一些主要的高级JavaScript库尚未为它们提供很好的支持，因此我们将直接使用XmlHTTPRequest抓取数据。
　　际上生成图表部分没有什么新的内容。将如此大数量的数据加载到igDataChart系列中也不必使用任何特殊的设置。该代码将创建一个新的XMLHttpRequest，它是所有AJAX请求的核心。如果习惯于使用jQuery中的ajax和它的家族方法，那么它们最终在后台将使用该API进行处理。接下来，你定义了回调函数，它将在请求完成时被调用。
　　首先，你将基于ArraryBuffer创建一个DataVlew，用于帮助从二进制数据响应中提取浮点数值。因为每个单精度浮点数含有4个字节，并且它们组成了整个文件，所以将数据大小除以4即可得到数据项的数量。然后遍历所有的数据项，并按顺序从数据缓冲区中提取出每个值。最后，当数据完成编码后，你将使用它们渲染图表。已经完全创建完毕的回调将在二进制数据响应成功返回时调用，唯一剩下的事情就是执行HTTP GET获得文件data.bin，表示响应类型应该是一个ArrayBuffer并初始化异步请求。如果运行了之前的代码，那么应该看到图标中加载了一百万个数据点。