读书人

flot时区有关问题

发布时间: 2012-11-22 00:16:41 作者: rapoo

flot时区问题

基于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;                        }        }    });   }
?

?

?

?

?

读书人网 >Web前端

热点推荐