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;            
	            }
	        }
   	 	});
   	}

 

 

 

 

 

评论

3 楼 chen417980762 2011-11-23  

困扰我两天的问题，终于搞好了，感谢楼主的分享

2 楼 zepeng06630925 2011-11-11  

Thanks 楼主啊，这问题我定位了好久了，差点没搞死我！

1 楼 rem1x 2010-05-13  

我也正好碰到这个问题，感谢分享。