参考:
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);
}