基于jQuery的图形显示插件Flot,比较容易上手。
Flot对于以时间为X轴的数据展示,可以自动决定以多少为间距,在X轴上显示刻度。这样当数据很多时,X轴上的刻度就不会拥挤。要注意X值应为getTime()的结果。
但使用时发现Flot会将时间转换成UTC世界标准时间,使用的都是setUTCDate(), setUTCHours()等函数,取出来的时间比实际少8小时,只要将jquery.flot.js中的UTC全部去掉即可。
显示CPU占用率之类百分比的js
//按默认方式,显示单个属性的趋势图,以时间为横轴 function plotSingleTrend(placeholder, dataset){ var plot = $.plot(placeholder, [ dataset ], { series: { lines: { show: true }, points: { show: false } }, grid: { hoverable: true, clickable: true }, xaxis: { mode: 'time' }, yaxis: { min: 0, max:100 } }); bindTooltip(placeholder); return plot; } //显示数据点的提示信息 function showTooltip(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', 'font-size': '12px', opacity: 0.80 }).appendTo("body").fadeIn(200); } var previousPoint = null; function bindTooltip(placeholder){ placeholder.bind("plothover", function (event, pos, item) { if (true) { if (item) { if (previousPoint != item.datapoint) { previousPoint = item.datapoint; $("#tooltip").remove(); var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); var dateTime = new Date(); dateTime.setTime(x); var dateTimeStr = dateTime.toLocaleString(); dateTimeStr = dateTimeStr.replace(' ',''); var context = item.series.label + "(" + dateTimeStr + " = " + y+ ")"; showTooltip(item.pageX, item.pageY, context); } } else { $("#tooltip").remove(); previousPoint = null; } } }); }