首页 > 代码库 > jquery flotcharts使用简介
jquery flotcharts使用简介
flotcharts是一个基于jquery的，使用Canvas画HTML图表的js库。
它的使用很简单，一般情况下只要下载它的zip包，然后看它的那几个例子就知道该怎么做了，更高级一点的，可以参考一下它的文档。在我们项目的使用中，主要花了一点功夫的地方是如何让它能正确地处理和显示时间数据。
一般来说，flotcharts的使用是这样的。首先，要在页面上加上对IE 8以下Canvas的支持，然后，再加上jquery与jquery.plot的js，就像这样：
<!--[if lte IE 8]><script src="http://www.mamicode.com/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在后面数据点的横坐标偏差较大，更好的方法参见这篇文章。
jquery flotcharts使用简介