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在后面数据点的横坐标偏差较大,更好的方法参见这篇文章

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。