Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图)。
特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC
它的特点是使用简单、图形美观,支持鼠标跟踪及缩放功能。
Flot是基于canvas进行图表的绘制,可以在IE6+/Firefox2+/Safari3+/Opera9.5+/Chrome等主流浏览器上运行;其中IE9以下浏览器不支持canvas标记,需要额外引用excanvas库(VML)来实现。
![](http://www.9iu.org/wp-content/uploads/2012/12/053456lf6.png)
基本使用
首先,在页面头部引用脚本:
<!--[
if
IE]><script src=
"js/excanvas.min.js"
></script><![endif]-->
<script src=
"js/jquery.min.js"
></script>
<script src=
"js/jquery.flot.min.js"
></script>
在页面中创建一个html标记,如div,然后通过样式来指定图表的大小:
1 |
< div id = "placeholder" style = "width:600px;height:300px;" ></ div > |
最后,在DOM Ready事件中调用Flot的绘制方法$.plot:
2 |
$.plot($( "#placeholder" ), [[[0, 0], [1, 2]]]); |
这样就简单的绘制了一条线。
数据格式
flot的数据格式是数组,数组中包含多个系列的数据,每个系列的数据对应一条线:
1 |
[ series1, series2, ... ] |
每一个系列的数据可以是一个数组或者对象。
数组格式的数据,每一个点都是一个数组(分x/y轴):
1 |
[ [x1, y1], [x2, y2], ... ] |
如下定义了三个点:
1 |
[ [1, 3], [2, 14.01], [3.5, 3.14] ] |
绘制图表的时候,会把这三个点连接起来;假如中间有个点使用了空值即null,这个点的两边则不会连接起来:
1 |
[ [1, 3], [2, 14.01], null , [3.5, 3.14], [5, 8] ] |
需要注意的是,每个点的数据必须是数字,如果是字符串,可能会得到奇怪的错误。
对象格式的数据,如下:
02 |
color: color or number |
05 |
lines: specific lines options |
06 |
bars: specific bars options |
07 |
points: specific points options |
13 |
highlightColor: color or number |
通常不需要关心其他选项,只需要指定label和data:
3 |
data: [[0, 3], [10, 3]] |
对象格式的数据提供更大的灵活性,也更有利于代码的可读性,如下定义了两个系列即两条线:
1 |
[ { label: "Foo" , data: [ [10, 1], [17, -14], [30, 5] ] }, |
2 |
{ label: "Bar" , data: [ [11, 13], [19, 11], [30, -7] ] } |
选项设置
所有的选项都是可选的,改变某个属性,只需要指定特定的属性名称:
005 |
lines, points, bars: { |
011 |
fill: boolean or number |
013 |
fillColor: null or color/gradient |
020 |
symbol: "circle" or function |
025 |
align: "left" , "right" or "center" |
036 |
highlightColor: color or number |
039 |
colors: [ color1, color2, ... ] |
049 |
backgroundColor: color/gradient or null |
050 |
margin: number or margin object({top,left,bottom,right}) |
054 |
markings: array of markings or (fn: axes -> array of markings) |
058 |
borderColor: color or null |
059 |
minBorderMargin: number or null |
065 |
autoHighlight: boolean |
066 |
mouseActiveRadius: number |
071 |
redrawOverlayInterval: number or -1 |
075 |
show: null or true / false |
077 |
position: "bottom" or "top" or "left" or "right" |
079 |
mode: null or "time" ( "time" requires jquery.flot.time.js plugin) |
081 |
timezone: null , "browser" or timezone (only makes sense for mode: "time" ) |
083 |
color: null or color spec |
085 |
tickColor: null or color spec |
086 |
font: null or font spec object |
090 |
autoscaleMargin: null or number |
092 |
transform: null or fn: number -> number |
093 |
inverseTransform: null or fn: number -> number |
095 |
ticks: null or number or ticks array or (fn: axis -> ticks array) |
096 |
tickSize: number or array |
097 |
minTickSize: number or array |
099 |
tickFormatter: (fn: number, object -> string) or string |
101 |
tickDecimals: null or number |
103 |
labelWidth: null or number |
104 |
labelHeight: null or number |
105 |
reserveSpace: null or true |
107 |
tickLength: null or number |
109 |
alignTicksWithAxis: null or number |
118 |
labelFormatter: null or (fn: string, series object -> string) |
119 |
labelBoxBorderColor: color |
121 |
position: "ne" or "nw" or "se" or "sw" |
122 |
margin: number of pixels or [x margin, y margin] |
123 |
backgroundColor: null or color |
124 |
backgroundOpacity: number between 0 and 1 |
126 |
container: null or jQuery object/DOM element/jQuery expression |
127 |
sorted: null / false , true , "ascending" , "descending" or a comparator |
格式化图例的显示
通过legend参数的labelFormatter参数来格式化图例的显示,其中series为一个对象(属性参考对象格式的数据):
1 |
labelFormatter: function (label, series) { |
3 |
return '<a href="#' + label + '" title="' + series.label + '">' + label + '</a>' ; |
轴的设置
自定义刻度的显示,可以通过ticks参数来设置,如下定义X轴:
2 |
ticks: [0, 2, 4, 8, 10, 15] |
这样轴上只会显示以上定义的刻度。当有时候数据超出这个范围时,部分刻度会被隐藏,这时候就需要手动指定min/max参数,如下:
01 |
$.plot($( "#placeholder" ), |
02 |
[{ label: "Foo" , data: [[10, 1], [17, -14], [30, 5]] }, |
03 |
{ label: "Bar" , data: [[11, 13], [19, 11], [30, -7]] } |
07 |
ticks: [0, 2, 4, 8, 10, 15], |
ticks参数还可以定制刻度显示的文字:
1 |
ticks: [[0, "零" ], [2, "二" ], [4, "四" ], [8, "八" ], [10, "十" ], [15, "十五" ]] |
最强大的还是通过自定义函数,通过tickFormatter参数:
1 |
tickFormatter: function (axis) { |
2 |
return "数字" + axis.toString(); |
绘制多个刻度轴
如下,绘制两个y轴,同时需要在数据中指定属于哪个轴:
01 |
$.plot($( "#placeholder" ), |
02 |
[ { label: "Foo" , data: [[10, 1], [17, -14], [30, 5]] }, |
03 |
{ label: "Bar" , data: [[11, 13], [19, 11], [30, -7]] }, |
04 |
{ label: "Three" , data: [[2, 6], [5, 8], [18, 15]], yaxis: 2 }, |
07 |
xaxes: [{ position: "bottom" }], |
08 |
yaxes: [{ position: "left" }, { position: "right" , min: 2 }] |
时间格式的数据
使用时间格式的数据需要引用jquery.flot.time.js,它支持以下格式的时间格式化:
01 |
%a: weekday name (customizable) |
02 |
%b: month name (customizable) |
03 |
%d: day of month, zero-padded (01-31) |
04 |
%e: day of month, space-padded ( 1-31) |
05 |
%H: hours, 24-hour time, zero-padded (00-23) |
06 |
%I: hours, 12-hour time, zero-padded (01-12) |
07 |
%m: month, zero-padded (01-12) |
08 |
%M: minutes, zero-padded (00-59) |
09 |
%S: seconds, zero-padded (00-59) |
11 |
%Y: year (four digits) |
13 |
%P: AM/PM (uppercase version of %p) |
14 |
%w: weekday as number (0-6, 0 being Sunday) |
还支持自定义月份、一周中每一天的名称:
1 |
monthNames: [ "jan" , "feb" , "mar" , "apr" , "maj" , "jun" , "jul" , "aug" , "sep" , "okt" , "nov" , "dec" ] |
2 |
dayNames: [ "dim" , "lun" , "mar" , "mer" , "jeu" , "ven" , "sam" ] |
使用如下:
01 |
$.plot($( "#placeholder" ), |
02 |
[{ label: "Foo" , data: [[ new Date(2010, 1, 1), 1], [ new Date(2010, 5, 1), -14], [ new Date(2010, 10, 1), 5]] }, |
03 |
{ label: "Bar" , data: [[ new Date(2010, 2, 1), 13], [ new Date(2010, 6, 1), 11], [ new Date(2010, 12, 1), -7]] } |
08 |
timeformat: "%y/%m/%d" |
当然,如果不使用timeformat的话,也可以用tickFormatter来格式化显示:
1 |
tickFormatter: function (val, axis) { |
4 |
return (d.getUTCMonth() + 1) + "/" + d.getUTCDate() + "/" + d.getFullYear(); |
特殊的显示需求
可能需要在同一个点上进行时间的对比,比如x轴:
01 |
$.plot($( "#placeholder" ), |
02 |
[ { label: "Foo" , data: [[1, new Date(2010, 1, 1)], [2, new Date(2010, 5, 1)], [3, new Date(2010, 10, 1)]] }, |
03 |
{ label: "Bar" , data: [[1, new Date(2010, 2, 1)], [2, new Date(2010, 6, 1)], [3, new Date(2010, 12, 1)]] } |
08 |
timeformat: "%y/%m/%d" |
11 |
ticks: [[1, "一" ], [2, "二" ], [3, "三" ]] |
在以上方法中,把x轴和x轴刻度的值一一对应,当然也可以换成y轴。
控制线和点的显示
通过series参数,可以控制线的填充、点的显示(点默认是不显示的):
2 |
lines: { show: true , fill: true }, |
3 |
points: { show: true , fill: false } |
颜色的控制
flot有多个参数都用到了颜色,均可以通过定义单个、或多个颜色来控制每个数据呈现的颜色:
1 |
colors: [ "#d18b2c" , "#dba255" , "#919733" ] |
再比如网格的背景色:
2 |
backgroundColor: { colors: [ "#000" , "#999" ] } |
颜色还有更加详细的选项来定义:
1 |
{ colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] } |
跟踪鼠标事件
主要有鼠标移动和点击事件,需要先开启相应开关:
然后再绑定相应的事件,如点击事件:
01 |
$( "#placeholder" ).bind( "plotclick" , function (event, pos, item) { |
02 |
console.log( "You clicked at " + pos.x + ", " + pos.y); |
07 |
console.log(item.series, item.datapoint); |
08 |
console.log( "You clicked a point!" ); |
plothover事件的的绑定也一样。item对象主要有以下属性:
2 |
datapoint: the point, e.g. [0, 2] |
3 |
dataIndex: the index of the point in the data array |
4 |
series: the series object |
5 |
seriesIndex: the index of the series |
6 |
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事件中使用:
1 |
var pl = $.plot($( "#placeholder" ), data, options); |
3 |
$( "#placeholder" ).bind( "plotclick" , function (event, pos, item) { |
5 |
pl.highlight(item.series, item.datapoint); |
flot还提供了一些函数,用于在绘图各个流程步骤中进行一些额外的处理,这里不再列出。