您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

web前端js绘制统计图表,访问数据库

51自学网 2020-04-02 08:48:24
  javascript

web前端js绘制统计图表,访问数据库

 

现在有很多js库可以方便地在web客户端绘制出漂亮的统计图表,显示效果和开发易用性并不亚于在JSP Server端使用诸如JFreeChart组件生成图片流传递到客户端。
一般要求浏览器支持html5的canvas功能,为兼容不支持的浏览器,js库另外提供了canvas脚本库。
本例记录了采用免费开源基于jquery的js绘图库—— jqplot、MS ActiveX框架、MS Acess 开发学习实例.
部分源码:

 

 

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2.   
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.     <title>Statistics</title>  
  7.     <link type="text/css" rel="stylesheet" href="../css/pagestyle.css"/>  
  8.     <script type="text/javascript" src="../js/jquery.min.js"></script>  
  9.     <script language="javascript" type="text/javascript" src="../js/excanvas.js"></script>  
  10.       
  11.     <script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script>  
  12.     <script type="text/javascript" src="../js/jqplot.dateAxisRenderer.min.js"></script>  
  13.     <link rel="stylesheet" type="text/css" hrf="../css/jquery.jqplot.min.css" />  
  14.       
  15.     <script type="text/javascript">  
  16.           
  17.         var drawline = function(obj,areaid,tt){  
  18.           //var line1=[['2008-08-12 4:00PM',4], ['2008-09-12 4:00PM',6.5], ['2008-10-12 4:00PM',5.7], ['2008-11-12 4:00PM',9], ['2008-12-12 4:00PM',8.2]];  
  19.           var line1 = obj;  
  20.           var plot1 = $.jqplot(areaid, [line1], {  
  21.             title:tt,  
  22.             axes:{  
  23.                 xaxis:{  
  24.                     renderer:$.jqplot.DateAxisRenderer,  
  25.                     tickOptions:{formatString:'%Y/%#m/%#d'}  
  26.                 }  
  27.             },  
  28.             series:[{lineWidth:4, markerOptions:{style:'square'}}]  
  29.             });  
  30.         }  
  31.           
  32.           
  33.         var getData  = function(sql,a1,line){  
  34.             //查询数据  
  35.         //  var a = new Array(3);  
  36.         //  a[0] = new Array(1,2,3);  
  37.         //  a[1] = new Array(3,4,5);   
  38.           
  39.             var filefolder = location.href.substring(0, location.href.indexOf("statistics.html"));                
  40.             var dbpath = filefolder.substring(8) + "../db/oilcar.mdb" ; //去掉 "file:///"  ,路径有效                
  41.                  
  42.             var con = new ActiveXObject("ADODB.Connection"),  
  43.                 fso = new ActiveXObject("Scripting.FileSystemObject"),                              //①  
  44.                 connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fso.GetFile(dbpath); // ① 这种写法有效  
  45.             con.Open(connstr);  //①  
  46.             var rs = new ActiveXObject("ADODB.Recordset");                            
  47.             rs.open(sql,con);                 
  48.               
  49.             while(!rs.eof){  
  50.                 var theday = rs.Fields.item("date_jiayou").value;  
  51.                 var carnum =rs.Fields.item("carnumber").value;          //号牌                      
  52.                 var miles = rs.Fields.item("totalmileage").value;       //总里程,整数  
  53.                 var oilleft = rs.Fields.item("oilboxpercent").value;      
  54.                 var price = rs.Fields.item("per_price").value;      //价格,实数  
  55.                 var oiltype = rs.Fields.item("oiltype").value;  //类型  
  56.                 var quantity = rs.Fields.item("quantity").value;    //量,实数  
  57.                 var fee = rs.Fields.item("pay").value;  //总费用,实数  
  58.                 var seller = rs.Fields.item("seller").value; //商家  
  59.                 var place = rs.Fields.item("location").value;   //地点  
  60.                 var remark = rs.Fields.item("remark").value;    //备注     
  61.                 palce = (place=="")?"":place;  
  62.                 remark = (remark=="")?"":remark;                  
  63.                 var d = new Date(Date.parse(theday));  
  64.                 var y,m,day;  
  65.                 y = d.getFullYear();  
  66.                 m = d.getMonth()+1 ;  
  67.                 dday = d.getDate();  
  68.                 theday = y +"/" + m +  "/" + day;  
  69.                 oilleft = Number(oilleft).toFixed(4);       //剩余百分比,小数    
  70.                   
  71.                 a1[line] = new Array();  
  72.                 a1[line][0] = Date.parse(theday);  
  73.                 a1[line][1] = new Number(oilleft);//这里必须new对象,否则还会传递原对象,导致本函数被调用处(111行)提示“对象不再有效”  
  74.                 a1[line][2] = new Number(miles);//这里必须new对象,否则还会传递原对象,导致本函数被调用处(111行)提示“对象不再有效”  
  75.                 a1[line][3] = new Number(price);//这里必须new对象,否则还会传递原对象,导致本函数被调用处(111行)提示“对象不再有效”  
  76.                 a1[line][4] = new Number(quantity);//这里必须new对象,否则还会传递原对象,导致本函数被调用处(111行)提示“对象不再有效”  
  77.                 //a1[line] = new Array(theday,oilleft,miles,price,quantity);  
  78.                 //alert(a1[line]);        
  79.                 line++;  
  80.                   
  81.                               
  82.                 rs.moveNext;  
  83.             }                             
  84.               
  85.               
  86.               
  87.             rs.close();    
  88.             rs = null;   
  89.             con.Close();  
  90.             con = null;      
  91.               
  92.         //  alert(a1[0]);  
  93.             return a1;  
  94.         }  
  95.           
  96.           
  97.         var getPrices = function(sql,a2,line){        
  98.           
  99.             var filefolder = location.href.substring(0, location.href.indexOf("statistics.html"));                
  100.             var dbpath = filefolder.substring(8) + "../db/oilcar.mdb" ; //去掉 "file:///"  ,路径有效                
  101.                  
  102.             var con = new ActiveXObject("ADODB.Connection"),  
  103.                 fso = new ActiveXObject("Scripting.FileSystemObject"),                              //①  
  104.                 connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fso.GetFile(dbpath); // ① 这种写法有效  
  105.             con.Open(connstr);  //①  
  106.             var rs = new ActiveXObject("ADODB.Recordset");                            
  107.             rs.open(sql,con);                 
  108.               
  109.             while(!rs.eof){  
  110.                 var theday = rs.Fields("date_jiayou");  
  111.                 var carnum =rs.Fields("carnumber");         //号牌                      
  112.                 var miles = rs.Fields("totalmileage");      //总里程,整数  
  113.                 var oilleft = rs.Fields("oilboxpercent");     
  114.                 var price = rs.Fields("per_price");     //价格,实数  
  115.                 var oiltype = rs.Fields("oiltype"); //类型  
  116.                 var quantity = rs.Fields("quantity");   //量,实数  
  117.                 var fee = rs.Fields("pay"); //总费用,实数  
  118.                 var seller = rs.Fields("seller"); //商家  
  119.                 var place = rs.Fields("location");  //地点  
  120.                 var remark = rs.Fields("remark");   //备注     
  121.                 palce = (place=="")?"":place;  
  122.                 remark = (remark=="")?"":remark;                  
  123.                 var d = new Date(Date.parse(theday));  
  124.                 var y,m,day;  
  125.                 y = d.getFullYear();  
  126.                 m = d.getMonth()+1 ;  
  127.                 dday = d.getDate();  
  128.                 theday = y +"/" + m +  "/" + day;  
  129.                 oilleft = Number(oilleft).toFixed(4);       //剩余百分比,小数    
  130.                   
  131.                 a2[line] = new Array();  
  132.                 a2[line][0] = new Date(Date.parse(theday));               
  133.                 a2[line][1] = new Number(price);//这里必须new对象,否则还会传递原对象,导致本函数被调用处(111行)提示“对象不再有效”                       
  134.                 line++;                                   
  135.                 rs.moveNext;  
  136.             }                             
  137.                           
  138.             rs.close();    
  139.             rs = null;   
  140.             con.Close();  
  141.             con = null;           
  142.             return a2;  
  143.         }  
  144.       
  145.         $(function(){  
  146.               
  147.               
  148.               
  149.              $("#st").click(function(){  
  150.                  var a1 = new Array();  
  151.                  var line = 0;  
  152.                  $("#dv_1").html("");  
  153.                  var y =   Number($("#t1").val());//需要验证....  
  154.                  var d1 = y+"/"+ 1 + "/"+1;  
  155.                  var d2 = (y+1)+"/"+ 1+ "/"+1;  
  156.                  //alert(d2);  
  157.                  var sql = "select * from oilcarlog where date_jiayou>=#"+ d1+"# and  date_jiayou<#"+ d2 +"# order by date_jiayou asc ";  
  158.                  //var arr = getData(sql);  
  159.                  var obj =  getData(sql,a1,line);//二维数组 : /日期 /油剩余百分比 /里程 /单价 /加油量  
  160.                 //alert(obj[1]);  
  161.                   
  162.                 var bar_x = new Array(), bar_y = new Array() ;//x:日期  y:油耗  
  163.                   
  164.                 for(i=1;i<obj.length;i++){  
  165.                     var cur_oilleft = obj[i][1];//当前行剩油百分比  
  166.                     var oil_spent = 0 ;//油耗,指到上一次或前面某次加油时所加的油之和  
  167.                     var cur_miles = obj[i][2] ; //当前行里程  
  168.                     var miles_travel = 0 ;  
  169.                     var haspoint_calc = false;  
  170.                     for(j=i-1;j>=0;j--){  
  171.                         //剩油百分比小于等于1/16时,近似算作这次与计算行(待计算日)剩油百分比相同,以便累计待计算的总油耗:前几次到当前日期(当前日期不含)所加油量之和  
  172.                         var percent = cur_oilleft - obj[j][1];  
  173.                         oil_spent += obj[j][4];  
  174.                         miles_travel = cur_miles - obj[j][2];  
  175.                         if( percent <=  0.0625  ){                             
  176.                             //找到可计算日期  
  177.                             haspoint_calc = true;  
  178.                             break;  
  179.                         }                         
  180.                     }  
  181.                     if(haspoint_calc){  
  182.                         var d = new Date(obj[i][0]);          
  183.                     //  var year = d.getFullYear() , month = d.getMonth + 1;  
  184.                                           
  185.                         var date_calc = new String(d.getFullYear() + "/" +  String(new Number(d.getMonth()) + 1) + "/" + new String(d.getDate()));  
  186.                         var oil = new Number(100*oil_spent/miles_travel);//百公里油耗 升/百公里  
  187.                         bar_x.push( date_calc );  
  188.                         bar_y.push( oil.toFixed(2) );   
  189.                     }  
  190.                 }  
  191.                 var obj = new Array();  
  192.                 for(k=0;k<bar_x.length;k++){  
  193.                     obj[k] = new Array(String(bar_x[k]),Number(bar_y[k]));  
  194.                 }  
  195.   
  196.                 drawline(obj,'dv_1','汽车油耗统计(升/百公里)');  
  197.             });  
  198.               
  199.             $("#oil").click(function(){  
  200.                 var a2 = new Array();  
  201.                 var line = 0;  
  202.                 $("#dv_1").html("");  
  203.                 var y =   Number($("#t1").val());//需要验证....  
  204.                 var d1 = y+"/"+ 1 + "/"+1;  
  205.                 var d2 = (y+1)+"/"+ 1+ "/"+1;                  
  206.                 var sql = "select * from oilcarlog where date_jiayou>=#"+ d1+"# and  date_jiayou<#"+ d2 +"# order by date_jiayou asc ";  
  207.                 var obj =  getPrices(sql,a2,line);//二维数组 : /日期  /单价               
  208.                 drawline(obj,'dv_1','汽油单价浮动');   
  209.             });  
  210.       
  211.         });  
  212.     </script>  
  213.       
  214. </head>  
  215.   
  216. <body>  
  217. <div  style="height: 99%;">  
  218. <div style="height: 10%;">  
  219.     <label style="font-size: 13px;   font-style: normal; font-weight: bold;">统计年份:</label>  
  220.     <input type="text" id="t1" name="theday" value="2015" /><span style="font-size: 10px">(如:2015)</span>  
  221.     <input  type="button" value="统计"  class="btn_statistics" id="st" />|<input  type="button" value="油价浮动"  class="btn_statistics" id="oil" />  
  222. </div>  
  223. <div style="height: 90%;">  
  224. <fieldset style="font-size: 14px; color:blue; width: 90%; height:90% ">  
  225. <legend>查询图表</legend>  
  226.     <div id="dv_1" style="width:600px; height:350px; margin-top:20px; margin-left:20px;">   
  227.     </div>  
  228. </fieldset>  
  229. </div>  
  230. </div>  
  231. </body>  
  232. </html>  

下载地址:
Canvas三种动态画圆实现方法说明
JavaScript极其简单入门——小程序开发前准备
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1