Jquery.flotX轴日期对应不上

时区导致的Jquery.flot坐标对应不上的问题

Jquery.flot.time.js

(function($) {

Var options = {

Xaxis: {

Timezone: null,

Timeformat: null,

twelveHourClock: false,

monthName: null

}

};

})

//当timezone被设为null时，jquery.flot会将传进来的时间默认为浏览网页的电脑所在时区的时间，而如果服务器和浏览网页的电脑不在同一个时区，那么横坐标上显示的时间会显示为浏览网页的电脑所在时区时间对应的服务器时间。这样描述有些拗口，举例如下：

 

比如网站服务器在中国，

浏览网页的电脑在加利福尼亚（时间比北京时间晚15个小时），

传入jquery.flot的数据a的时间参数为2017年6月22日2点22分，

那么当你将鼠标放在图表数据节点上时会显示数据时间2017年6月22日2点22分但是数据对应的图表横坐标的时间会显示为2017年6月22日17点22分，意思是加利福尼亚时间2017年6月22日2点22分对应着北京时间的2017年6月22日17点22分！

 

要解决这个问题需要两步操作，第一步先将xaxis的属性设置如下：

Xaxis: {

mode: “time”,

timezone: “browser”,

timeformat: null,

twelveHourClock: false,

monthName: null

}

此时不管浏览网站的电脑在哪个时区，都会默认为世界统一时间，也就是默认数据的时间参数为世界统一时间，如果服务器在中国，也就是东八区，时间就相差了8个小时。

第二步，手动配置横坐标时间具体如下：

function formatDate(d, fmt, monthNames, dayNames) {

if (typeof d.strftime =="function") {

return d.strftime(fmt);

}

var leftPad = function(n, pad) {

n = "" + n;

pad = "" + (pad == null ? "0" : pad);

return n.length == 1 ? pad + n : n;

};

var r = [];

var escape = false;

var hours = d.getHours();

var isAM = hours < 12;

var days = d.getDate();

//var months = d.getMonth();

var years = d.getFullYear();

var a = year%4;

var b = year%100;

var c = year%400;

var yue = d.getMonth();

if (hours >= 8) {//小时大于等于8

    hours = hours - 8;

} else if (days > 1) {//小时小于8，日期大于1

    hours = hours + 16;

    days = days - 1;

} else if (yue == 0) {//小时小于8，日期等于1，月份等于1

    years = years - 1;

    hours = hours + 16;

    yue = 11;

    days = 31;

} else if (yue == 1) {//小时小于8，日期等于1，月份等于2

    yue = yue - 1;

    days = 31;

    hours = hours + 16;

} else if (yue == 2) {//小时小于8，日期等于1，月份等于3

    yue = yue - 1;

    if (c == 0 || (a ==0 && b != 0)) {

        days = 29;

    } else {

        days = 28;

    }

    hours = hours + 16;

} else if (yue == 3) {//小时小于8，日期等于1，月份等于4

    yue = yue - 1;

    days = 31;

    hours = hours + 16;

} else if (yue == 4) {//小时小于8，日期等于1，月份等于5

    yue = yue - 1;

    days = 30;

    hours = hours + 16;

} else if (yue == 5) {//小时小于8，日期等于1，月份等于6

    yue = yue - 1;

    days = 31;

    hours = hours + 16;

} else if (yue == 6) {//小时小于8，日期等于1，月份等于7

    yue = yue - 1;

    days = 30;

    hours = hours + 16;

} else if (yue == 7) {//小时小于8，日期等于1，月份等于8

    yue = yue - 1;

    days = 31;

    hours = hours + 16;

} else if (yue == 8) {//小时小于8，日期等于1，月份等于9

    yue = yue - 1;

    days = 31;

    hours = hours + 16;

} else if (yue == 9) {//小时小于8，日期等于1，月份等于10

    yue = yue - 1;

    days = 30;

    hours = hours + 16;

} else if (yue == 10) {//小时小于8，日期等于1，月份等于11

    yue = yue - 1;

    days = 31;

    hours = hours + 16;

} else if (yue == 11) {//小时小于8，日期等于1，月份等于12

    yue = yue - 1;

    days = 30;

    hours = hours + 16;

}

if (monthNames == null) {

monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

}

if (dayNames == null) {

dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

}

var hours12;

if (hours > 12) {

hours12 = hours - 12;

} else if (hours == 0) {

hours12 = 12;

} else {

hours12 = hours;

}

for (var i = 0; i < fmt.length; ++i) {

var c = fmt.charAt(i);

if (escape) {

switch (c) {

case 'a': c ="" + dayNames[d.getDay()];break;

case 'b': c ="" + monthNames[d.getMonth()];break;

case 'd': c = leftPad(days);break;

case 'e': c = leftPad(d.getDate()," ");break;

case 'h':// For back-compat with 0.7; remove in 1.0

case 'H': c = leftPad(hours);break;

case 'I': c = leftPad(hours12);break;

case 'l': c = leftPad(hours12," ");break;

case 'm': c = leftPad(yue + 1);break;

case 'M': c = leftPad(d.getMinutes());break;

// quarters not in Open Group's strftime specification

case 'q':

c = "" + (Math.floor(d.getMonth() / 3) + 1);break;

case 'S': c = leftPad(d.getSeconds());break;

case 'y': c = leftPad(years % 100);break;

case 'Y': c ="" + d.getFullYear();break;

case 'p': c = (isAM) ? ("" +"am") : ("" +"pm");break;

case 'P': c = (isAM) ? ("" +"AM") : ("" +"PM");break;

case 'w': c ="" + d.getDay();break;

}

r.push(c);

escape = false;

} else {

if (c == "%") {

escape = true;

} else {

r.push(c);

}

}

}

return r.join("");

}

第一次写博客，方法比较笨拙，有好的办法请指教！