web前端js繪製統計圖表,訪問資料庫
阿新 • • 發佈：2019-02-20
現在有很多js庫可以方便地在web客戶端繪製出漂亮的統計圖表，顯示效果和開發易用性並不亞於在JSP Server端使用諸如JFreeChart元件生成圖片流傳遞到客戶端。
一般要求瀏覽器支援html5的canvas功能，為相容不支援的瀏覽器，js庫另外提供了canvas指令碼庫。
本例記錄了採用免費開源基於jquery的js繪相簿—— jqplot、MS ActiveX框架、MS Acess 開發學習例項.
部分原始碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Statistics</title> <link type="text/css" rel="stylesheet" href="../css/pagestyle.css"/> <script type="text/javascript" src="../js/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="../js/excanvas.js"></script> <script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script> <script type="text/javascript" src="../js/jqplot.dateAxisRenderer.min.js"></script> <link rel="stylesheet" type="text/css" hrf="../css/jquery.jqplot.min.css" /> <script type="text/javascript"> var drawline = function(obj,areaid,tt){ //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]]; var line1 = obj; var plot1 = $.jqplot(areaid, [line1], { title:tt, axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickOptions:{formatString:'%Y/%#m/%#d'} } }, series:[{lineWidth:4, markerOptions:{style:'square'}}] }); } var getData = function(sql,a1,line){ //查詢資料 // var a = new Array(3); // a[0] = new Array(1,2,3); // a[1] = new Array(3,4,5); var filefolder = location.href.substring(0, location.href.indexOf("statistics.html")); var dbpath = filefolder.substring(8) + "../db/oilcar.mdb" ; //去掉 "file:///" ,路徑有效 var con = new ActiveXObject("ADODB.Connection"), fso = new ActiveXObject("Scripting.FileSystemObject"), //① connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fso.GetFile(dbpath); // ① 這種寫法有效 con.Open(connstr); //① var rs = new ActiveXObject("ADODB.Recordset"); rs.open(sql,con); while(!rs.eof){ var theday = rs.Fields.item("date_jiayou").value; var carnum =rs.Fields.item("carnumber").value; //號牌 var miles = rs.Fields.item("totalmileage").value; //總里程，整數 var oilleft = rs.Fields.item("oilboxpercent").value; var price = rs.Fields.item("per_price").value; //價格，實數 var oiltype = rs.Fields.item("oiltype").value; //型別 var quantity = rs.Fields.item("quantity").value; //量，實數 var fee = rs.Fields.item("pay").value; //總費用，實數 var seller = rs.Fields.item("seller").value; //商家 var place = rs.Fields.item("location").value; //地點 var remark = rs.Fields.item("remark").value; //備註 palce = (place=="")?" ":place; remark = (remark=="")?" ":remark; var d = new Date(Date.parse(theday)); var y,m,day; y = d.getFullYear(); m = d.getMonth()+1 ; day = d.getDate(); theday = y +"/" + m + "/" + day; oilleft = Number(oilleft).toFixed(4); //剩餘百分比，小數 a1[line] = new Array(); a1[line][0] = Date.parse(theday); a1[line][1] = new Number(oilleft);//這裡必須new物件，否則還會傳遞原物件，導致本函式被呼叫處(111行)提示“物件不再有效” a1[line][2] = new Number(miles);//這裡必須new物件，否則還會傳遞原物件，導致本函式被呼叫處(111行)提示“物件不再有效” a1[line][3] = new Number(price);//這裡必須new物件，否則還會傳遞原物件，導致本函式被呼叫處(111行)提示“物件不再有效” a1[line][4] = new Number(quantity);//這裡必須new物件，否則還會傳遞原物件，導致本函式被呼叫處(111行)提示“物件不再有效” //a1[line] = new Array(theday,oilleft,miles,price,quantity); //alert(a1[line]); line++; rs.moveNext; } rs.close(); rs = null; con.Close(); con = null; // alert(a1[0]); return a1; } var getPrices = function(sql,a2,line){ var filefolder = location.href.substring(0, location.href.indexOf("statistics.html")); var dbpath = filefolder.substring(8) + "../db/oilcar.mdb" ; //去掉 "file:///" ,路徑有效 var con = new ActiveXObject("ADODB.Connection"), fso = new ActiveXObject("Scripting.FileSystemObject"), //① connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fso.GetFile(dbpath); // ① 這種寫法有效 con.Open(connstr); //① var rs = new ActiveXObject("ADODB.Recordset"); rs.open(sql,con); while(!rs.eof){ var theday = rs.Fields("date_jiayou"); var carnum =rs.Fields("carnumber"); //號牌 var miles = rs.Fields("totalmileage"); //總里程，整數 var oilleft = rs.Fields("oilboxpercent"); var price = rs.Fields("per_price"); //價格，實數 var oiltype = rs.Fields("oiltype"); //型別 var quantity = rs.Fields("quantity"); //量，實數 var fee = rs.Fields("pay"); //總費用，實數 var seller = rs.Fields("seller"); //商家 var place = rs.Fields("location"); //地點 var remark = rs.Fields("remark"); //備註 palce = (place=="")?" ":place; remark = (remark=="")?" ":remark; var d = new Date(Date.parse(theday)); var y,m,day; y = d.getFullYear(); m = d.getMonth()+1 ; day = d.getDate(); theday = y +"/" + m + "/" + day; oilleft = Number(oilleft).toFixed(4); //剩餘百分比，小數 a2[line] = new Array(); a2[line][0] = new Date(Date.parse(theday)); a2[line][1] = new Number(price);//這裡必須new物件，否則還會傳遞原物件，導致本函式被呼叫處(111行)提示“物件不再有效” line++; rs.moveNext; } rs.close(); rs = null; con.Close(); con = null; return a2; } $(function(){ $("#st").click(function(){ var a1 = new Array(); var line = 0; $("#dv_1").html(""); var y = Number($("#t1").val());//需要驗證.... var d1 = y+"/"+ 1 + "/"+1; var d2 = (y+1)+"/"+ 1+ "/"+1; //alert(d2); var sql = "select * from oilcarlog where date_jiayou>=#"+ d1+"# and date_jiayou<#"+ d2 +"# order by date_jiayou asc "; //var arr = getData(sql); var obj = getData(sql,a1,line);//二維陣列 : /日期 /油剩餘百分比 /里程 /單價 /加油量 //alert(obj[1]); var bar_x = new Array(), bar_y = new Array() ;//x:日期 y:油耗 for(i=1;i<obj.length;i++){ var cur_oilleft = obj[i][1];//當前行剩油百分比 var oil_spent = 0 ;//油耗，指到上一次或前面某次加油時所加的油之和 var cur_miles = obj[i][2] ; //當前行里程 var miles_travel = 0 ; var haspoint_calc = false; for(j=i-1;j>=0;j--){ //剩油百分比小於等於1/16時，近似算作這次與計算行（待計算日）剩油百分比相同，以便累計待計算的總油耗：前幾次到當前日期(當前日期不含)所加油量之和 var percent = cur_oilleft - obj[j][1]; oil_spent += obj[j][4]; miles_travel = cur_miles - obj[j][2]; if( percent <= 0.0625 ){ //找到可計算日期 haspoint_calc = true; break; } } if(haspoint_calc){ var d = new Date(obj[i][0]); // var year = d.getFullYear() , month = d.getMonth + 1; var date_calc = new String(d.getFullYear() + "/" + String(new Number(d.getMonth()) + 1) + "/" + new String(d.getDate())); var oil = new Number(100*oil_spent/miles_travel);//百公里油耗 升/百公里 bar_x.push( date_calc ); bar_y.push( oil.toFixed(2) ); } } var obj = new Array(); for(k=0;k<bar_x.length;k++){ obj[k] = new Array(String(bar_x[k]),Number(bar_y[k])); } drawline(obj,'dv_1','汽車油耗統計(升/百公里)'); }); $("#oil").click(function(){ var a2 = new Array(); var line = 0; $("#dv_1").html(""); var y = Number($("#t1").val());//需要驗證.... var d1 = y+"/"+ 1 + "/"+1; var d2 = (y+1)+"/"+ 1+ "/"+1; var sql = "select * from oilcarlog where date_jiayou>=#"+ d1+"# and date_jiayou<#"+ d2 +"# order by date_jiayou asc "; var obj = getPrices(sql,a2,line);//二維陣列 : /日期 /單價 drawline(obj,'dv_1','汽油單價浮動'); }); }); </script> </head> <body> <div style="height: 99%;"> <div style="height: 10%;"> <label style="font-size: 13px; font-style: normal; font-weight: bold;">統計年份:</label> <input type="text" id="t1" name="theday" value="2015" /><span style="font-size: 10px">(如：2015)</span> <input type="button" value="統計" class="btn_statistics" id="st" />|<input type="button" value="油價浮動" class="btn_statistics" id="oil" /> </div> <div style="height: 90%;"> <fieldset style="font-size: 14px; color:blue; width: 90%; height:90% "> <legend>查詢圖表</legend> <div id="dv_1" style="width:600px; height:350px; margin-top:20px; margin-left:20px;"> </div> </fieldset> </div> </div> </body> </html>