<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-flot插件数据可视化显示</title>
<link rel="stylesheet" href="../css/blue.css" media="screen" />
<script src="../jquery-1.10.2.min.js"></script>
<script src="../jquery.flot.v081.js"></script>
<!--[if IE]>
<script src="../excanvas.js"></script>
<![endif]-->
<style type="text/css">
body{font-family: Arial,Helvetica,sans-serif;}
/*table{border-collapse: collapse; 100%;}
caption{font-weight: bold;font-size: 16px;color: #61b1ee;margin-bottom: 6px;}
td,th{padding: 5px;border:1px solid #aaa;text-align: center;}*/
.legend td,.legend th{padding: 2px;border: 0;}
#wrapper>h1{padding: 0.4em 0;}
</style>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<ul id="nav">
<li><a href="index.html" class="current">可视化显示统计数据</a></li>
<li><a href="#">使用flot插件</a></li>
</ul>
<div id="content">
<h2>可视化显示统计数据——折线图</h2>
<div id="dataarea">
<!-- <table>
<caption>站点访问人数统计表</caption>
<tbody>
<tr>
<td></td>
<th>8点</th>
<th>9点</th>
<th>10点</th>
<th>11点</th>
<th>12点</th>
</tr>
<tr>
<th>站点A</th>
<td>560</td>
<td>900</td>
<td>1200</td>
<td>1400</td>
<td>1500</td>
</tr>
<tr>
<th>站点B</th>
<td>620</td>
<td>1200</td>
<td>1000</td>
<td>1500</td>
<td>1450</td>
</tr>
<tr>
<th>站点C</th>
<td>420</td>
<td>1300</td>
<td>1800</td>
<td>1550</td>
<td>1600</td>
</tr>
<tr>
<th>站点D</th>
<td>300</td>
<td>600</td>
<td>1300</td>
<td>1600</td>
<td>1800</td>
</tr>
</tbody>
</table> -->
</div>
</div>
<div id="footer">Powered By Dennis Ji.</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var data = [
{
label:"站点A",
data:[
[12,1500],
[11,1400],
[10,1200],
[9,900],
[8,560]
]
},
{
label:"站点B",
data:[
[12,1450],
[11,1500],
[10,1000],
[9,1200],
[8,620]
]
},
{
label:"站点C",
data:[
[12,1600],
[11,1550],
[10,1800],
[9,1300],
[8,420]
]
},
{
label:"站点D",
data:[
[12,1800],
[11,1600],
[10,1300],
[9,600],
[8,300]
]
}
];
var options = {
legend:{
show:true,
labelFormatter:null,
margin:10,//[x,y]标签的margin值的x,y定位
position:"ne",//标签的定位"ne"(默认是ne):是top-right,"nw":是top-left,"se":是bottom-right,"sw":是bottom-left,
// labelBoxBorderColor:"#dbf5ab",//标签对象边框色
// backgroundColor:"#dbf5ab",//标签对象背景色
backgroundOpacity:0.5//标签对象背景色透明度设置
},
points:{
show:true,
radius:3
},
lines:{
show:true
},
grid:{
hoverable:true,
clickable:true
}
};
//获取显示区域
var $dataarea = $("#dataarea");
$dataarea.css("width","600px");
$dataarea.css("height","300px");
$.plot(dataarea,data,options);
function showTooltip(x,y,contents){
$('<div id="tooltip">'+contents+'</div>').css({
position:'absolute',
display:'none',
top:y+5,//用到参数y
left:x+5,//用到参数x
border:'1px solid #fdd',
padding:'2px',
'background-color':'#fee',
opacity:0.8
}).appendTo("body").fadeIn(200);
}
var previouspoint = null;
$dataarea.bind('plothover',function(e,pos,item){
if (item) {
if (previouspoint != item.datapoint) {
previouspoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX,item.pageY,item.series.label+":"+x+"点访问人数："+y);
}
} else{//否则删除提示层，清空当前点标记
$("#tooltip").remove();
previouspoint = null;
};
});
});
</script>
</html>