Flot畫折線圖

 參考：

flot 中文詳解http://www.cnblogs.com/qiudan/archive/2012/06/13/2547719.html

flot數據格式介紹：http://www.jqueryflottutorial.com/cn/jquery-flot-data-format.html

Q1 x軸時間差8小時

         參考jquery flotx軸時間差8小時問題http://lee1177.iteye.com/blog/1564514

var options = {  
        lines: { show: true },  
        points: { show: true },  
        grid: { hoverable: true},  
        xaxis: {   
            mode: "time",  
            timeformat: "%H:%M:%S",  
            tickFormatter: function (val, axis) {  
                var d = new Date(val);  
                return d.toLocaleTimeString();//轉爲當地時間格式  
            }  
        }  
    };  

注：此處tolocaleTimeString已經過時

Q2 時間戳與Date日期之間的轉換

 

參考:js時間戳怎麼轉換成日期格式http://www.sufeinet.com/thread-1500-1-1.html

 Date.prototype.Format = function (x) {
                var o = {
                    "M+": this.getMonth() + 1, //月份 
                    "d+": this.getDate(), //日 
                    "h+": this.getHours(), //小時 
                    "m+": this.getMinutes(), //分 
                    "s+": this.getSeconds(), //秒 
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                    "S": this.getMilliseconds() //毫秒 
                };
                if (/(y+)/.test(x)) x = x.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(x)) x = x.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return x;
            }

調用的時候只要:

val = parseInt(val, 10);//轉爲整形  
var dateTimeStr = new Date(val).Format("hh:mm");

將十三位數字的時間戳轉換成”yyyy-MM-dd hh:mm”時，

頁面顯示日期爲：NaN -NaN -NaN  aN:aN

 

此時可能是因爲時間戳表示爲‘時間戳數字’，此時只要將該時間戳轉換成整形就可以了

 

Q3 軸中刻度，顯示的值自定義

 

1.      Y軸自定義設置數組中的最大最小值:

Step1 先將多維數組轉換成一維數組

Step2 取一位數組中的最大最小值

  //獲取y軸數組的最大最小值
                a = [];
                for (i = 0; i < Array.length - 1; i++) {
                        Array [i][1] = parseInt(Array [i][1], 10);
                        a.push(Array [i][1]);
                }

Array是一個二維數組，將二維數組的第二個數賦值給a生成一個一維數組

用Math.min.apply(null, a)和Math.max.apply(null, a) 分別求出最大最小值

yaxis: {
                        min: Math.min.apply(null, numArray),
                        max: Math.max.apply(null, numArray),
                        ticks: 5,//刻度的個數
                        tickDecimals: 2
                    }

參考：http://my.oschina.net/idip/blog/285337

2.      X軸顯示time類型

                  xaxis: {
                        mode: "time",//默認爲null 顯示的是十進制的數值
                        twelveHourClock:false,//爲true就會顯示十二小時制
                        timeformat: "%y/%m/%d %H:%M",
                        tickFormatter: function (val, axis) {
                            val = parseInt(val, 10);//轉爲整形  
                            var dateTimeStr = new Date(val).Format("hh:mm");
                            return dateTimeStr;//轉爲當地時間格式
                        },
                        minTickSize: [1, "hour"] //設置兩個刻度差值的最小值                                     
                    },

"tickFormatter"定義也一個函數可以靈活的格式化刻度的顯示，函數有兩個參數，一個是刻度的值，一個是軸上的最大值和最小值，返回值一定要是string類型： function formatter(val, axis){     return val.toFixed(axis.tickDecimals);   }

 

 

 

Q4 鼠標經過的時候顯示的內容

 

       

         var previousPoint = null;
                $("#site_AG").bind("plothover", function (event, pos, item) {//鼠標移到上面顯示xy軸
                    $("#x").text(pos.x.toFixed(2));
                    $("#y").text(pos.y.toFixed(2));
                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint =item.dataIndex;
 
                            $("#tooltip").remove();
                            //時間戳轉換成日期格式
                            var x = item.datapoint[0].toFixed(0),
                               y =item.datapoint[1].toFixed(0);//去掉小數點
 
                            x = parseInt(x,10);
                            var dateTimeStr = new Date(x).Format("yyyy-MM-ddhh:mm");
                            drawTimeLine(item.pageX,item.pageY, dateTimeStr, y);
                        }
                    } else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                });

DrawTimeLine就是當鼠標移動到該點的時候的內容

 functiondrawTimeLine(pageX, pageY, dateTimeStr, y) {
                $('<div id="tooltip"class="chart-tooltip"style="width:100px!important"><divclass="date">' + '<\/div><divclass="label label-important"> ' + dateTimeStr + '<\/div><div class="labellabel-success">' + y + '<\/div><\/div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: pageY - 100,
                    width: 75,
                    left: pageX - 40,
                    border: '0px solid #ccc',
                    padding: '2px 6px',
                    'background-color': '#fff',
                }).appendTo("body").fadeIn(200);
            }