10个利用JavaScript来制作数据图表技术

本文介绍如何 利用JavaScript来制作数据图表，包括曲线图，点阵图，饼图和柱状图等。利用JavaScript来制作数据图表是一个非常好的展现图表的方式，比类似于Jfreechart等服务器端生成图表图片更具可伸缩，避免了服务器在生成和展现动态图表的负载压力。

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 饼图效果