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在后面数据点的横坐标偏差较大,更好的方法参见这篇文章。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。