jquery flotcharts使用简介

flotcharts是一个基于jquery的，使用Canvas画HTML图表的js库。

它的使用很简单，一般情况下只要下载它的zip包，然后看它的那几个例子就知道该怎么做了，更高级一点的，可以参考一下它的文档。在我们项目的使用中，主要花了一点功夫的地方是如何让它能正确地处理和显示时间数据。

一般来说，flotcharts的使用是这样的。首先，要在页面上加上对IE 8以下Canvas的支持，然后，再加上jquery与jquery.plot的js，就像这样：

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

接着，就是在页面上加上对应的代码，读取数据画图：

function draw_plot(data) {
  var d = [];
  for(var i=0; i<data.length; i++)
    d.push([i, data[i]]);

  $.plot($('#placeholder'),
    [{data: d, label: '测试数据'}],
    {
      series: {lines: {show: true}}
    }
  );
}

当然，上面代码中的data是一个数组，其中每个元素都是数字类型。下面是对应的图表。

在大部分时候，我们还需要悬浮特效，也就是要在用户把鼠标移到数据点上的时候飘出一个小浮层来，用来显示当前用户鼠标下方数据点的具体数据，这个时候，我们需要在调用plot的时候传入相应的参数，而且处理对应的鼠标悬浮事件，如下所示(鼠标悬浮的代码都是从flotcharts样例中的interacting.html页面代码里复制的)：

function show_tooltip(x, y, contents) {
  $('<div id="tooltip">' + contents + '</div>').css( {
    position: 'absolute',
    display: 'none',
    top: y + 5,
    left: x + 5,
    border: '1px solid #fdd',
    padding: '2px',
    'background-color': '#fee',
    opacity: 0.80
  }).appendTo("body").fadeIn(200);
}

function draw_plot(data) {
  var d = [];
  for(var i=0; i<data.length; i++)
    d.push([i, data[i]]);

  $.plot($('#placeholder'),
    [{data: d, label: '测试数据'}],
    {
      series: {
        lines: {show: true},
        points: {show: true}
      },
      grid: { hoverable: true }
    }
  );

  var previousPoint = null;
  $("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
      if (previousPoint != item.dataIndex) {
        previousPoint = item.dataIndex;

        $("#tooltip").remove();
        var x = item.datapoint[0], y = item.datapoint[1];
                
        show_tooltip(item.pageX, item.pageY,
          item.series.label + "[" + x + "] : " + y);
      }
    }
    else {
      $("#tooltip").remove();
      previousPoint = null;            
    }
  });
}

经过这些处理以后得到的图是这样的：

最后就是要让flotcharts能正确显示时间了，主要是需要在横轴上做一些处理。在flotcharts的plot的第三个参数支持使用mode参数，将其设置为time即可显示出日期/时间来，但是这个显示出来的时间是英文的，例如Nov 12之类的，对我们来说就不那么方便了。其实，由于flotcharts只是将横轴数据当做数字来处理，而且又提供了格式化显示横轴数据的接口，因此，我们完全可以传入一个Date对象的getTime()值，然后再使用自定义横轴数据显示接口，将其转化为我们希望的格式。如下例所示：

function show_tooltip(x, y, contents) {
  $('<div id="tooltip">' + contents + '</div>').css( {
    position: 'absolute',
    display: 'none',
    top: y + 5,
    left: x + 5,
    border: '1px solid #fdd',
    padding: '2px',
    'background-color': '#fee',
    opacity: 0.80
  }).appendTo("body").fadeIn(200);
}

function draw_plot(data) {
  var start_time = new Date().getTime() - 1000*3600*24*data.length;
  var d = [];
  for(var i=0; i<data.length; i++)
    d.push([start_time + i*1000*3600*24, data[i]]);

  $.plot($('#placeholder'),
    [{data: d, label: '测试数据'}],
    {
      series: {
        lines: {show: true},
        points: {show: true}
      },
      grid: { hoverable: true },
      xaxis: { tickFormatter: function(n, o) {var d = new Date(); d.setTime(n); return (d.getMonth()+1) + "-" + d.getDate();}}
    }
  );

  var previousPoint = null;
  $("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
      if (previousPoint != item.dataIndex) {
        previousPoint = item.dataIndex;

        $("#tooltip").remove();
        var x = new Date(), y = item.datapoint[1];
        x.setTime(item.datapoint[0]);
        show_tooltip(item.pageX, item.pageY,
          item.series.label + "[" + x.getFullYear() + "-" + (x.getMonth()+1) + "-" + x.getDate() + "] : " + y);
      }
    }
    else {
      $("#tooltip").remove();
      previousPoint = null;            
    }
  });
}

这次做完以后，可以得到显示日期的图表了。如下图所示：

其他的效果都可以参见flotcharts的文档和例子了，这里就不说了。

2015.1.16附注：

上面代码对时间数据的处理过于简单，x轴数据过大貌似会造成flotcharts在后面数据点的横坐标偏差较大，更好的方法参见这篇文章。