<!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;width: 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>