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