自己动手写web统计图-flot扩展

1. Flot简介

flot是纯Javascript实现的基于jQuery的图表插件，主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图)。它的特点是使用简单、图形美观，支持鼠标跟踪，可扩展性及缩放功能，最重要的一点它是免费的。

关于flot使用方法这里就不多说了，园子中有许多的好文章，个人推荐 囧月 。

2.Flot不足

flot是2007年就发起的项目，而且在2009年还算火了一阵子，但此后就杳无音讯，所以 Flot的有些功能在实际开发过程中还不算完善，这些就需要我们来扩展。好在flot有很好的扩展机制，我们可以根据自己的需求来实现我们想要的功能。ps:直到2011初才有发布了新的版本。

3.扩展Flot

首先我要说的是扩展Flot的语法，很简单，代码如下：

(function ($) {
 $.plot.plugins.push({
    init: //初始化方法,
    options://插件参数,
    name: //插件名,
    version: //版本号
 });
})(jQuery);

 

然后Flot插件给我们提供了方便我们扩展的钩子函数（Hook Function），详细内容请看 API  这里给大家介绍几个常用的hook。

processOptions—处理flot参数时

processDatapoints-处理数据时

draw-画完统计图时

使用方法：

plot.hooks.processOptions.push(初始化方法);

plot.hooks.processDatapoints.push(初始化方法);

plot.hooks.draw.push(初始化方法);

6.一个简单示例

(functioin($){
    var options={};//flot选项
   //初始化方法
    function init(plot){
      function temp(){
      //Do something
      }
      plot.hooks.processDatapoints.push(temp); 
    } 
    $.plot.plugins.push({
        init: init,
        options: options,
        name: 'temp',
        version: '1.0'
     });
 })(jQuery);

 

5.自己的Flot插件分享

jquery-flot-valueLabel插件-用于给柱状图的每根柱子显示相应的y轴值的标签。ps:折线图当然也可以，不过我觉的没有必要。download：jquery-flot-valueLabel

jquery-flot-scrollbar插件是一个可以使柱状图的柱子滚动的插件。同时感谢园友 豪情 的文章对我的帮助。download：jquery-flot-scrollbar

【更新】

1、原先jquery-flot-label插件改名为jquery-flot-valueLabel并修复了一些bug

2、jquery-flot现在已经迁到了GitHub上了 https://github.com/flot/flot ，版本也升级到了0.8.3

 

以上是本人在工作中的一些心得，希望对大家有所帮助。欢迎大家给出宝贵意见和吐槽。