<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="./flot/jquery.min.js" ></script>
<script type="text/javascript" src="./flot/jquery.flot.min.js" ></script>
<!--[if IE]><script type="text/javascript" src="./flot/excanvas.min.js" ></script><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
// alert(11);
// GMT 时间 var d = new Date("2010/12/08 00:00:00"); (new Date("2010/12/08 00:00:00")).getTime() = 1291737600000
// UTC 时间 day = d.getHours(); d = d.setHours(8+day);
// UTC 和 GMT相差8小时(可能是中国吧,别的地区可能也不一定是8小时)
/* 大致运算过程如下
var d=new Date("2010/12/09 00:00:00");
day = d.getHours();
d = d.setHours(8+day);
d = new Date(d);
x = d.getTime();
console.log(d);
console.log(x);
*/
var d = [
[1291766400000, 20.2], [1291770000000, 12.7], [1291773600000, 13.5], [1291777200000, 14.5],
[1291780800000, 24.3], [1291784400000, 12.3], [1291788000000, 22.5], [1291791600000, 15.5],
[1291795200000, 22.5], [1291798800000, 17.3], [1291802400000, 10.9], [1291806000000, 16.6],
[1291809600000, 20.2], [1291813200000, 12.7], [1291816800000, 13.5], [1291820400000, 14.5],
[1291824000000, 24.3], [1291827600000, 12.3], [1291831200000, 22.5], [1291834800000, 15.5],
[1291838400000, 22.5], [1291842000000, 17.3], [1291845600000, 10.9], [1291849200000, 16.6]
];
var d1 = [
[1291766400000, 20.2], [1291770000000, 12.7], [1291773600000, 13.5], [1291777200000, 14.5],
[1291780800000, 24.3], [1291784400000, 12.3], [1291788000000, 22.5], [1291791600000, 15.5],
[1291795200000, 22.5], [1291798800000, 17.3], [1291802400000, 10.9], [1291806000000, 16.6],
[1291809600000, 20.2], [1291813200000, 12.7], [1291816800000, 13.5], [1291820400000, 14.5],
[1291824000000, 24.3], [1291827600000, 12.3], [1291831200000, 22.5], [1291834800000, 15.5],
[1291838400000, 22.5], [1291842000000, 17.3], [1291845600000, 10.9], [1291849200000, 16.6]
];
for (var i = 0; i < d1.length; ++i)
d1[i][1] += Math.random()*10;
var datas =
[
{
label: "Test Data1 (mm)",
color: "#DEB887",
data:d
},
{
label: "Test Data2 (mm)",
color: "#FFF8DC",
data:d1
}
];
// 控制选项,参考API.txt
var opt ={
points:{show:true, clickable:true, hoverable:true},
lines:{show:true, lineWidth: 3},
selection: { mode: "x" },
yaxis: {max: 40},
xaxis: {mode:"time", timeformat: "%y/%m/%d %H:%M", minTickSize: [1, "minute"],},
legend:{position: "nw", backgroundColor:"#ff0"},// "ne" or "nw" or "se" or "sw"
grid: {backgroundColor: { colors: ["#5a6", "#999"] }}
};
$.plot($('#placeholder'), datas, opt);
});
</script>
</head>
<body>
<div id="placeholder" style="background:#9af;width:900px;height:500px;">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="./flot/jquery.min.js" ></script>
<script type="text/javascript" src="./flot/jquery.flot.min.js" ></script>
<!--[if IE]><script type="text/javascript" src="./flot/excanvas.min.js" ></script><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
// alert(11);
// GMT 时间 var d = new Date("2010/12/08 00:00:00"); (new Date("2010/12/08 00:00:00")).getTime() = 1291737600000
// UTC 时间 day = d.getHours(); d = d.setHours(8+day);
// UTC 和 GMT相差8小时(可能是中国吧,别的地区可能也不一定是8小时)
/* 大致运算过程如下
var d=new Date("2010/12/09 00:00:00");
day = d.getHours();
d = d.setHours(8+day);
d = new Date(d);
x = d.getTime();
console.log(d);
console.log(x);
*/
var d = [
[1291766400000, 20.2], [1291770000000, 12.7], [1291773600000, 13.5], [1291777200000, 14.5],
[1291780800000, 24.3], [1291784400000, 12.3], [1291788000000, 22.5], [1291791600000, 15.5],
[1291795200000, 22.5], [1291798800000, 17.3], [1291802400000, 10.9], [1291806000000, 16.6],
[1291809600000, 20.2], [1291813200000, 12.7], [1291816800000, 13.5], [1291820400000, 14.5],
[1291824000000, 24.3], [1291827600000, 12.3], [1291831200000, 22.5], [1291834800000, 15.5],
[1291838400000, 22.5], [1291842000000, 17.3], [1291845600000, 10.9], [1291849200000, 16.6]
];
var d1 = [
[1291766400000, 20.2], [1291770000000, 12.7], [1291773600000, 13.5], [1291777200000, 14.5],
[1291780800000, 24.3], [1291784400000, 12.3], [1291788000000, 22.5], [1291791600000, 15.5],
[1291795200000, 22.5], [1291798800000, 17.3], [1291802400000, 10.9], [1291806000000, 16.6],
[1291809600000, 20.2], [1291813200000, 12.7], [1291816800000, 13.5], [1291820400000, 14.5],
[1291824000000, 24.3], [1291827600000, 12.3], [1291831200000, 22.5], [1291834800000, 15.5],
[1291838400000, 22.5], [1291842000000, 17.3], [1291845600000, 10.9], [1291849200000, 16.6]
];
for (var i = 0; i < d1.length; ++i)
d1[i][1] += Math.random()*10;
var datas =
[
{
label: "Test Data1 (mm)",
color: "#DEB887",
data:d
},
{
label: "Test Data2 (mm)",
color: "#FFF8DC",
data:d1
}
];
// 控制选项,参考API.txt
var opt ={
points:{show:true, clickable:true, hoverable:true},
lines:{show:true, lineWidth: 3},
selection: { mode: "x" },
yaxis: {max: 40},
xaxis: {mode:"time", timeformat: "%y/%m/%d %H:%M", minTickSize: [1, "minute"],},
legend:{position: "nw", backgroundColor:"#ff0"},// "ne" or "nw" or "se" or "sw"
grid: {backgroundColor: { colors: ["#5a6", "#999"] }}
};
$.plot($('#placeholder'), datas, opt);
});
</script>
</head>
<body>
<div id="placeholder" style="background:#9af;width:900px;height:500px;">
</div>
</body>
</html>