jQuery插件Flot实战Demo

<!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>
   
   <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">
               
           </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>

时间： 2024-08-01 20:27:45

jQuery插件Flot实战Demo

jQuery插件Flot实战Demo的相关文章

jquery插件flot的使用

jquery ajax分页插件特效源代码demo完整版

jQuery 插件编程精讲与技巧

The ultimate jQuery Plugin List(终极jQuery插件列表)

两百个jQuery插件集合

一步一步写jQuery插件

编写jQuery插件

jQuery插件-ajaxFileUpload异步上传文件

跨浏览器的placeholder-jQuery版（jQuery插件EnPlaceholder）