jquery flot 时间曲线图

<?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>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页