jQuery 的图表绘制插件 Flot

jQuery 的图表绘制插件 Flot：

 

Ole Laursen 在使用 Plotr 和 PlotKit （都是图表绘制库）的时候得到灵感，开发了一个基于 jQuery 的图表绘制插件 ── Flot 。目前只能绘制线状图和柱状图，估计不久后会支持更多的图表。随了绘制图表外，还提供了任意缩放图表的功能！

        Folt 的使用相当简单，而且绘制的图表外观很吸引人，加上可以随意缩放这个交互功能，Flot 完全有可能应用在商业的 Web 应用上！Flot 在绘图是基于 canvas 的，Firefox 和 Safari 等浏览器都原生支持 canvas，虽然 IE 不支持，但可以通过一个小插件就能解决。现在，先看下 Flot 的效果图吧：（下面仅是截图，Flot 绘制出图表完全不是图像文件）

 

 

  是不是很令人兴奋:)下面简单介绍下 Flot 的使用。先下载最新版的jQuery 的图表绘制插件 Flot：

• http://code.google.com/p/flot/downloads/list
• jquery.flot-0.1.js
• jquery.flot-0.1.pack.js
• excanvas.pack.js

       jquery.flot-0.1.pack.js 是 jquery.flot-0.1.js 的压缩版本。excanvas.pack.js 是 IE 浏览器的 canvas 支持插件。你可以这样引入 excanvas 脚本文件：

<!–[if IE]><script language=”javascript” type=”text/javascript” src=”excanvas.js”></script><![endif]–>

       还有一点注意的是，Flot 需要 最新版本的 jQuery 1.2.1。

       然后，在页面创建一个占位符：

<div id=”placeholder”></div>

       当然，你也可以在 Div 层上施加样式：

   <div id=”placeholder” style=”width:600px;height:300px”></div>

       在脚本文件上添加下个简单的 jQuery 代码：

  $.plot($(“#placeholder”), data, options);

       大功告成！在上面的 jQuery 代码中，参数 data 是一个图表的数据数组，options 是 plot 的一组可选参数。具体的可以参看 Flot 的 API 文档 和 例子 。

参考资料：

• Flot 项目主页： http://code.google.com/p/flot/