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