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在后面數據點的橫坐標偏差較大，更好的方法參見這篇文章。