Ross Wan's World!

Python, Ajax, PHP and Linux.

jQuery 的图表绘制插件 Flot

Posted by Ross Wan 于 2007/12/07

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

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

   

       是不是很令人兴奋:)下面简单介绍下 Flot 的使用。先下载相关文件:

       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 文档例子

参考资料:

Advertisements

一条回应 to “jQuery 的图表绘制插件 Flot”

  1. qwe said

    用 flot jquery 如何绘制 xyz 三轴的图像呢?

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

 
%d 博主赞过: