Flot是純Javascript實現的基於jQuery的圖表外掛，主要支援線狀圖和柱狀圖的繪製(通過外掛也可以支援餅狀圖)。它的特點是使用簡單、圖形美觀，支援滑鼠跟蹤及縮放功能。Flot是基於canvas進行圖表的繪製，可以在IE6+/Firefox2+/Safari3+/Opera9.5+/Chrome等主流瀏覽器上執行；其中IE9以下瀏覽器不支援canvas標記，需要額外引用excanvas庫(VML)來實現。

基本使用

1.首先，在頁面頭部引用指令碼：

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

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

2.在頁面中建立一個html標記，如div，然後通過樣式來指定圖表的大小：

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

3.最後，在DOM Ready事件中呼叫Flot的繪製方法$.plot：

$(function () {
    $.plot($("#placeholder"
 
), [[[0, 0], [1, 2]]]);
});

4.做完上面的步驟就繪製完成了一條線

資料格式

flot的資料格式是陣列，陣列中包含多個系列的資料，每個系列的資料對應一條線：

[ series1, series2, ... ]

每一個系列的資料可以是一個數組或者物件。
陣列格式的資料，每一個點都是一個數組(分x/y軸)：

[ [x1, y1], [x2, y2], ... ]

如下定義了三個點：

[ [1, 3], [2, 14.01], [3.5, 3.14] ]

繪製圖表的時候，會把這三個點連線起來；假如中間有個點使用了空值即null，這個點的兩邊則不會連線起來：

[ [1, 3], [2, 14.01], null, [3.5, 3.14], [5, 8] ]

需要注意的是，每個點的資料必須是數字，如果是字串，可能會得到奇怪的錯誤。
物件格式的資料，如下：

{
    color: color or number  //顏色，如果不設定會自動生成
    data: rawdata //資料
    label: string //用於圖例說明
    lines: specific lines options
    bars: specific bars options
    points: specific points options
    xaxis: number
    yaxis: number
    clickable: boolean
    hoverable: boolean
    shadowSize: number
    highlightColor: color or number
}

通常不需要關心其他選項，只需要指定label和data：

{
    label: "y = 3",
    data: [[0, 3], [10, 3]]
}

物件格式的資料提供更大的靈活性，也更有利於程式碼的可讀性，如下定義了兩個系列即兩條線：

[ 
  { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
  { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] }
]

選項設定

所有的選項都是可選的，改變某個屬性，只需要指定特定的屬性名稱：

{
  // 自定義資料系列
  series: {
    //共有屬性：點、線、柱狀圖的顯示方式
    lines, points, bars: {
          // 是否顯示
          show: boolean
          // 線寬度
          lineWidth: number
          // 是否填充
          fill: boolean or number
          // 填充色，如rgba(255, 255, 255, 0.8)
          fillColor: null or color/gradient
      }
      // 只針對點的屬性
      points: {
          //點的半徑
          radius: number
          // 繪製點的方法，預設為內建的圓形，可以通過自定義函式來定義其他形狀
          symbol: "circle" or function
      }
      // 只針對柱狀圖的屬性
      bars: {
          barWidth: number
          align: "left", "right" or "center"
          horizontal: boolean
      }
      // 只針對線的屬性
      lines: {
          // 指定兩個點之間是用水平線還是垂直線連線
          steps: boolean
      }
      // 設定陰影的大小，0消除陰影
      shadowSize: number
      // 滑鼠懸停時的顏色
      highlightColor: color or number
  }
  // 設定各個對應的資料序列，即線的顏色
  colors: [ color1, color2, ... ]
  // 網格設定
  grid: {
      // 是否顯示格子
      show: boolean
      // 資料的線是否繪製在網格線下
      aboveData: boolean
      // 網格線顏色
      color: color
      // 網格背景顏色
      backgroundColor: color/gradient or null
      margin: number or margin object({top,left,bottom,right})
      // 刻度與網格間距
      labelMargin: number
      axisMargin: number
      markings: array of markings or (fn: axes -> array of markings)
      // 邊框寬度
      borderWidth: number
      // 邊框顏色
      borderColor: color or null
      minBorderMargin: number or null
      // 監聽滑鼠點選，會生成plotclick事件
      clickable: boolean
      // 監聽滑鼠移動，會生成plothover事件
      hoverable: boolean
      // 滑鼠附近元素高亮顯示
      autoHighlight: boolean
      mouseActiveRadius: number
  }

  interaction: {
      // 最大重繪延遲
      redrawOverlayInterval: number or -1
  }
  // x,y軸的設定
  xaxis, yaxis: {
      show: null or true/false
      // 刻度文字顯示的位置
      position: "bottom" or "top" or "left" or "right"
      // 設定成time型別時可以用時間作為資料
      mode: null or "time" ("time" requires jquery.flot.time.js plugin)
      // 時區，僅用於time模式
      timezone: null, "browser" or timezone (only makes sense for mode: "time")
      // 軸文字和刻度文字顏色
      color: null or color spec
      // 單獨定義刻度文字顏色
      tickColor: null or color spec
      font: null or font spec object
      // 最大最小隻範圍，不設定則自動計算
      min: null or number
      max: null or number
      autoscaleMargin: null or number
      // 對資料進行計算後再繪製
      transform: null or fn: number -> number
      inverseTransform: null or fn: number -> number
      // 用於自定義刻度顯示
      ticks: null or number or ticks array or (fn: axis -> ticks array)
      tickSize: number or array
      minTickSize: number or array
      // 格式化刻度顯示
      tickFormatter: (fn: number, object -> string) or string
      // 刻度顯示精確度，即小數位數
      tickDecimals: null or number
      // 刻度區域大小
      labelWidth: null or number
      labelHeight: null or number
      reserveSpace: null or true

      tickLength: null or number

      alignTicksWithAxis: null or number
  }
  // 定義多個座標軸
  xaxes: []
  yaxes: []
  // 圖例
  legend: {
      show: boolean
      // 格式化圖例的顯示
      labelFormatter: null or (fn: string, series object -> string)
      labelBoxBorderColor: color
      noColumns: number
      position: "ne" or "nw" or "se" or "sw"
      margin: number of pixels or [x margin, y margin]
      backgroundColor: null or color
      backgroundOpacity: number between 0 and 1
       //圖例的容器，用於從圖表中分離
      container: null or jQuery object/DOM element/jQuery expression
      sorted: null/false, true, "ascending", "descending" or a comparator
  }

格式化圖例的顯示

通過legend引數的labelFormatter引數來格式化圖例的顯示，其中series為一個物件(屬性參考物件格式的資料)：

labelFormatter: function (label, series) {
  // series is the series object for the label 
  return '<a href="#' + label + '" title="' + series.label + '">' + label + '</a>';
}

軸的設定

自定義刻度的顯示，可以通過ticks引數來設定，如下定義X軸：

xaxis: {
  ticks: [0, 2, 4, 8, 10, 15]
}

這樣軸上只會顯示以上定義的刻度。當有時候資料超出這個範圍時，部分刻度會被隱藏，這時候就需要手動指定min/max引數，如下：

$.plot($("#placeholder"), 
  [{ label: "Foo", data: [[10, 1], [17, -14], [30, 5]] },
    { label: "Bar", data: [[11, 13], [19, 11], [30, -7]] }
  ],
  {
    xaxis: {
      ticks: [0, 2, 4, 8, 10, 15],
      min: 0,
      max: 30
    }
  }
  );

ticks引數還可以定製刻度顯示的文字：

ticks: [[0, "零"], [2, "二"], [4, "四"], [8, "八"], [10, "十"], [15, "十五"]]

最強大的還是通過自定義函式，通過tickFormatter引數：

tickFormatter: function(axis) {
  return "數字" + axis.toString();
}

繪製多個刻度軸

如下，繪製兩個y軸，同時需要在資料中指定屬於哪個軸：

$.plot($("#placeholder"), 
  [ { label: "Foo", data: [[10, 1], [17, -14], [30, 5]] },
    { label: "Bar", data: [[11, 13], [19, 11], [30, -7]] },
    { label: "Three", data: [[2, 6], [5, 8], [18, 15]], yaxis: 2 },
  ],
  {
    xaxes: [{ position: "bottom" }],
    yaxes: [{ position: "left" }, { position: "right", min: 2 }]
  }
  );

時間格式的資料

使用時間格式的資料需要引用jquery.flot.time.js，它支援以下格式的時間格式化：

%a: weekday name (customizable)
%b: month name (customizable)
%d: day of month, zero-padded (01-31)
%e: day of month, space-padded ( 1-31)
%H: hours, 24-hour time, zero-padded (00-23)
%I: hours, 12-hour time, zero-padded (01-12)
%m: month, zero-padded (01-12)
%M: minutes, zero-padded (00-59)
%S: seconds, zero-padded (00-59)
%y: year (two digits)
%Y: year (four digits)
%p: am/pm
%P: AM/PM (uppercase version of %p)
%w: weekday as number (0-6, 0 being Sunday)

還支援自定義月份、一週中每一天的名稱：

monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
dayNames: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"]

使用如下：

$.plot($("#placeholder"),
   [{ label: "Foo", data: [[new Date(2010, 1, 1), 1], [new Date(2010, 5, 1), -14], [new Date(2010, 10, 1), 5]] },
     { label: "Bar", data: [[new Date(2010, 2, 1), 13], [new Date(2010, 6, 1), 11], [new Date(2010, 12, 1), -7]] }
   ],
   {
     xaxis: {
       mode: "time",
       timeformat: "%y/%m/%d"
     }
   }
   );

當然，如果不使用timeformat的話，也可以用tickFormatter來格式化顯示：

tickFormatter: function (val, axis) {
  var d = new Date(val);
  console.log(val)
  return (d.getUTCMonth() + 1) + "/" + d.getUTCDate() + "/" + d.getFullYear();
}

特殊的顯示需求

可能需要在同一個點上進行時間的對比，比如x軸：

$.plot($("#placeholder"),
   [ { label: "Foo", data: [[1, new Date(2010, 1, 1)], [2, new Date(2010, 5, 1)], [3, new Date(2010, 10, 1)]] },
     { label: "Bar", data: [[1, new Date(2010, 2, 1)], [2, new Date(2010, 6, 1)], [3, new Date(2010, 12, 1)]] }
   ],
   {
     yaxis: {
       mode: "time",
       timeformat: "%y/%m/%d"
     },
     xaxis: {
       ticks: [[1, "一"], [2, "二"], [3, "三"]]
     }
   }
   );

在以上方法中，把x軸和x軸刻度的值一一對應，當然也可以換成y軸。

控制線和點的顯示

通過series引數，可以控制線的填充、點的顯示(點預設是不顯示的)：

series: {
  lines: { show: true, fill:true },
  points: { show: true, fill: false }
}

顏色的控制

flot有多個引數都用到了顏色，均可以通過定義單個、或多個顏色來控制每個資料呈現的顏色：

colors: ["#d18b2c", "#dba255", "#919733"]

再比如網格的背景色：

grid: {
    backgroundColor: { colors: ["#000", "#999"] }
}

顏色還有更加詳細的選項來定義：

{ colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] }

跟蹤滑鼠事件

主要有滑鼠移動和點選事件，需要先開啟相應開關：

grid: {
  clickable: true,
  hoverable: true
}

然後再繫結相應的事件，如點選事件：

$("#placeholder").bind("plotclick", function (event, pos, item) {
  console.log("You clicked at " + pos.x + ", " + pos.y);
  // axis coordinates for other axes, if present, are in pos.x2, pos.x3, ...
  // if you need global screen coordinates, they are pos.pageX, pos.pageY

  if (item) {
    console.log(item.series, item.datapoint);
    console.log("You clicked a point!");
  }
});

plothover事件的的繫結也一樣。item物件主要有以下屬性：

item: {
    datapoint: the point, e.g. [0, 2]
    dataIndex: the index of the point in the data array
    series: the series object
    seriesIndex: the index of the series
    pageX, pageY: the global screen coordinates of the point
}

內建方法

highlight(series, datapoint)：高亮顯示point
unhighlight(series, datapoint) or unhighlight()：取消高亮point，沒有引數則取消高亮當前的point
setData(data)：重新設定資料，需要呼叫draw()方法來重繪
setupGrid()：重新計算座標、軸，需要呼叫draw()方法來重繪
draw()：重繪圖表
triggerRedrawOverlay()：更新可互動的區域，如point
width()/height()：獲取寬高
offset()：獲取偏移
pointOffset({ x: xpos, y: ypos })：獲取某個點相對於placeholder的div的偏移
resize()：調整圖表的大小
shutdown()：清理即取消繫結所有事件處理函式

還有一些其他函式，但需要你比較瞭解flot內部運作，否則可能產生不好的結果：

getData()：獲取資料，即在$.plot方法中定義的資料
getAxes()：獲取座標軸
getPlaceholder()：獲取placeholder元素
getCanvas()：獲取canvas物件
getPlotOffset()：獲取偏移
getOptions()：獲取設定的選項

如highlight方法，就可以在click事件中使用：

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

 $("#placeholder").bind("plotclick", function (event, pos, item) {
   if (item) {
     pl.highlight(item.series, item.datapoint);
   }
 });

flot還提供了一些函式，用於在繪圖各個流程步驟中進行一些額外的處理，這裡不再列出。

相關資源

外掛主頁：http://code.google.com/p/flot/   (API文件：http://people.iola.dk/olau/flot/API.txt)

最新版本：https://github.com/flot/flot  (API文件：https://github.com/flot/flot/blob/master/API.md)

線上DEMO：http://people.iola.dk/olau/flot/examples/

Flot的外掛：http://code.google.com/p/flot/wiki/Plugins (實現更多型別的圖表)