使用JavaScript制作网页数据图表/曲线图

高效的数据展示效果，能够让用户很快理解和领悟那些既复杂又索然无味的统计信息。例如，将大数据量的信息点阵化和图表化，或许能够替换掉在网页（或Web应用程序）上以表格形式来表现数据这种古老的方式。目前，已经存在相当多的方案来将统计数据图表化，例如《使用8个CSS技巧来美化统计数据图表》。

但本篇文章将围绕，如何利用JavaScript来制作数据图表，包括曲线图，点阵图，饼图和柱状图等。

Flot

Flot ，是IOLA团队在JQuery基础上开发的数据图表JavaScript函数库。Flot不仅使用起来非常简单，而且包含大量的特色功能。例如，它包含一个鼠标控制缩放的特性（可点击并拖拽目标区域）和一些简单的用户交互特性（例如，通过鼠标点击可获取所在目标位置x和y坐标的信息）。

在线演示：不同的图表类型展示

 

Flotrt图表JavaScript函数库

Flotr，是由Solutoire.com的Bas Wenneker 所编写的一套JavaScirpt函数库。Flotr是受Flot的启发，在ProtoType和excanvas.js基础上开发的一套统计数据图表化的解决方案。它支持包括IE 6在内的多种主流浏览器，提供包括数据点信息捕捉，选择和鼠标位置捕捉等多项特色功能。

在线演示：基本功能演示

 

jQuery的fgCharting插件

fgCharting jQuery 插件，是一款表现图表数据非常可行的解决方案。它首先将图表所需信息读取到一个表格结构之中，然后将此表格动态的显示在图表框架中呈现出来。fgCharting支持非传统浏览器浏览数据图表，比如使用screen readers。它最基础的应用只需要短短一行行代码（初始化jQuery插件）即可实现。

在线演示：图表类型页面

 

PlotKit

PlotKit ，是在Mochikit.基础上开发的图表显示JavaScript函数库，它是在一个名为CanvasGraph.js函数库基础上进行代码重写和结构优化而产生的。我们可以在短时间内迅速上手PlotKit，因为开发者们给我们提供了一个PlotKit快速入门教材。值得注意的是，PlotKit 支持SVG格式。

在线演示：SVG Renderer Tests

 

JavaScript Diagram Builder

JavaScript Diagram Builder，支持各种类型的图表类型数据，包括柱状图，点阵图，曲线图和饼图。开发者提供了一个浏览器测试工具来协助我们检测不同类型的浏览器是否支持某些特定的对象或方法。

在线演示：柱状图对象

 

Emprise JavaScript Charts

Emprise JavaScript Charts，授权给个人用户使用它的所有图表显示功能性代码。

在线演示：区域性图表实例

 

Dynamic Drive饼图代码

DynamicDrive，提供了一个基于DHTML/CSS的饼图绘制方案。它的功能非常明确，仅提供了我们两个JS文件：wz_jsgraphics.js和pie.js，用以绘制漂亮的饼图。你所需要做的就是，在文档中直接设置JS或者外部引入JS来定义饼图各部分的值。

 

Dynamic Drive曲线图代码

DynamicDrive所提供的曲线图代码，是另一个基于DHTML/CSS的线形图绘制方案。它的原理和使用方法与上面我们提到的饼图代码类似。

 

Canvas 3D图表

如果你需要一个三维数据图表，那么Canvas 3D图表肯定是一个不错的选择。请注意，Canvas需要引入excanvas.js来支持IE浏览器的正常显示。

 

Dojo图表绘制引擎

Dojo图表绘制引擎，是在 Dojo Toolkit Javascript函数库基础上开发而来。它支持丰富的图表显示特性，包括数据分析结果的动态显示，3D柱状图和悬停动画触发效果。

在线演示：3D 饼图效果

 

你在项目中的网页图表显示解决方案是否包含在介绍的例子中呢？如果没有，请留言和大家分享你的方案吧！

原文来源：sixrevisions.com

翻译：Code52.Saturn

 

 

 

 

 

 

 

来源：http://www.51eren.com/getmassage/2009115/200911504046210.shtml