Flot 基于 jQuery 统计图表 JavaScript 插件

Question

Flot 是一个基于 jQuery 统计图表 JavaScript 插件，使用 HTML5 Canvas 画布绘图，如果是旧版本的浏览器，插件会通过 JavaScript 模拟绘图实现兼容，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。

安装插件

只需要在引入 jQuery 之后，引入插件文件即可：

<script src="jquery.js"></script>
<script src="jquery.flot.js"></script>

对于主流的浏览器，Flot 都是兼容支持的，只要支持 THML5 中的 Canvas 画布即可，如果你是使用的 IE < 9 ，那么需要使用 Excanvas excanvas 模拟画布绘图，你可以先引入到这个文件：

<!--[if lte IE 8]>
<script src="excanvas.min.js"></script>
<![endif]-->

如果在你的客户端任然无法工作，你可以尝试 Flashcanvas ，通过 Flash 来绘制统计图表，性能可能稍微慢点，但是这也是最好的解决方法。

你使用 jQuery 的版本必须大于 1.2.6 。

使用方法

创建一个用于放置统计图表的 DIV 容器：

<div id="placeholder"></div>

您需要设置此 DIV 的宽度和高度，否则绘图库不知道如何缩放图表。你可以做这样的内联：

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

你可以使用CSS样式设置绘图容器的尺寸，但是这样可能会出现一些闪现 BUG ，内联样式应该是最合适的方式，在网页加载的时候，就直接占位绘图的尺寸。

通常是在文档就绪的情况下，运行绘图函数：

$.plot($("#placeholder"), data, options);

data 是自定义的数组，也就是统计图表展现的内容，应该是一个者二维数组，options 是我们自定义统计图表的对象，Flot 有一些默认值，这个参数是可以省略的。

相关链接

• Github地址：https://github.com/flot/flot
• 项目主页：http://www.flotcharts.org/