javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表

更新時(shí)間：2010年07月29日 13:17:25 作者：

下面是完成后的預(yù)覽圖，可以看到，繪制一個(gè)表格，耗時(shí)0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！

工作需要，用javascript做一個(gè)統(tǒng)計(jì)圖表：
完成后，做個(gè)筆記，大家分享一下，互相學(xué)習(xí)。其中還有點(diǎn)問(wèn)題，還不是很完善。
其中參考了百度空間，中管理中心，訪問(wèn)統(tǒng)計(jì)，的js統(tǒng)計(jì)圖表。但是應(yīng)用上還是有差別，因?yàn)槲易龅倪@個(gè)項(xiàng)目中，需要時(shí)實(shí)的繪制新的統(tǒng)計(jì)表格，當(dāng)有數(shù)據(jù)變化的時(shí)候，就會(huì)調(diào)用繪制表格的方法。所以要考慮頁(yè)面性能的問(wèn)題。

下面是完成后的預(yù)覽圖，可以看到，繪制一個(gè)表格，耗時(shí)0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
目前在firefox，chrome，IE8，正常沒(méi)問(wèn)題，IE6下有問(wèn)題，我現(xiàn)在已經(jīng)不管IE6了，做前端的兄弟們要盡量引導(dǎo)用戶放棄IE6啦。

全部代碼如下：可復(fù)制直接運(yùn)行。
現(xiàn)在有一個(gè)問(wèn)題，求解，就是在firebug調(diào)試狀態(tài)下，鼠標(biāo)一旦移動(dòng)到水平標(biāo)尺線上，則報(bào)錯(cuò)！
哪位知道如何解決這個(gè)問(wèn)題，請(qǐng)不吝賜教！謝謝！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js柱狀統(tǒng)計(jì)圖</title> <style type="text/css"> /*樣式*/ #consuming_time{ font-size:12px; border:solid 1px #ccc; background-color:#f2f6fb; margin:10px 20px; height:40px; line-height:20px; padding:5px 10px; width:260px; } #TwentyFourHourChart{ width:700px; height:240px; border:solid 1px #B3B3DC; position:relative; top:40px; left:20px; } </style> <script type="text/javascript"> window.onload = function () { var _time = "開(kāi)始繪制時(shí)間：" + thisMomentTime(); toDrawingChart([15, 26, 32, 33, 44, 55, 66, 57, 88, 92, 67, 42, 45, 61, 105, 33, 24, 15, 36, 27, 28, 29, 10, 22], [10, 20, 22, 23, 30, 35, 50, 40, 62, 78, 60, 40, 25, 58, 95, 15, 20, 8, 25, 20, 18, 20, 5, 12]); _time += "<br>繪制完成時(shí)間：" + thisMomentTime(); document.getElementById("consuming_time").innerHTML = _time; //顯示提示信息 toShowTipMessage(); }; function thisMomentTime() { var m = (new Date).getHours() + "時(shí) " + (new Date).getMinutes() + "分 " + (new Date).getSeconds() + "秒 " + (new Date).getMilliseconds() + "毫秒"; return m; } /*Array 數(shù)組擴(kuò)展*/ Array.prototype.max = function () { return Math.max.apply({}, this); }; Array.prototype.min = function () { return Math.min.apply({}, this); }; //繪制24小時(shí)分時(shí)段呼入圖形報(bào)表的函數(shù) function toDrawingChart(/*String*/inCallsPerHour, /*String*/inCompletePerHour) { var ic = document.getElementById("TwentyFourHourChart"); //頁(yè)面上唯一的一個(gè)div，作為圖表的容器 if (inCallsPerHour != null) { var inCallMax = inCallsPerHour.max(); //從傳入的數(shù)組中取得數(shù)組最大值，用到了一個(gè)自己寫(xiě)的array的擴(kuò)展方法max() var topOffsetPercent = 180 / inCallMax; //計(jì)算以最大值為基準(zhǔn)的每像素顯示比例，百分比 for (var i = 0; i < inCallsPerHour.length; i++) { //循環(huán)24小時(shí)數(shù)據(jù) var sumrow = document.createElement("div"); //創(chuàng)建一個(gè)div元素sumrow sumrow.id = "sumrow_" + i + "_" + inCallsPerHour[i];//為剛剛創(chuàng)建的div元素sumrow添加id屬性（這里把時(shí)間，呼入電話總量數(shù)據(jù)寫(xiě)入到id中，后面顯示這些信息的時(shí)候有用） sumrow.setAttribute("class", "incallchartsumrow"); //添加屬性 //設(shè)置元素的left（每個(gè)div寬度為10px，那么第i個(gè)元素就應(yīng)該是i*10，因?yàn)檫€有一列10像素的組裝圖，所以還要*2，加上距離左側(cè)40px邊距 + 每2個(gè)柱狀圖為一組之間的間隔空隙6px，所以得出如下，） sumrow.style.left = (i * 10) * 2 + (i * 6) + 40 + "px"; //高度的計(jì)算，Math.round四舍五入取值，百分比的基數(shù) 乘以 當(dāng)前時(shí)段的呼入數(shù)據(jù)，為統(tǒng)計(jì)圖的高度 sumrow.style.height = Math.round(topOffsetPercent * inCallsPerHour[i]) + "px"; sumrow.style.width = "10px"; //寬度10px像素 sumrow.style.position = "absolute"; //絕對(duì)定位 sumrow.style.overflow = "hidden"; //超出部分隱藏 sumrow.style.background = "none repeat scroll 0 0 #1280ef"; //背景顏色 sumrow.style.display = "block"; //塊狀顯示 //距離容器上邊框的距離，圖表高度200 減去 當(dāng)前這個(gè)柱狀圖圖表高度 sumrow.style.top = 200 - Math.round(topOffsetPercent * inCallsPerHour[i]) + "px"; ic.appendChild(sumrow); //將創(chuàng)建的sumcow元素添加到ic容器中去 var timerow = document.createElement("div"); timerow.id = "timerow_" + i; timerow.setAttribute("class", "callnum"); timerow.style.left = (10 * i) * 2 + (i * 6) + 40 + "px"; timerow.style.width = "10px"; timerow.style.position = "absolute"; timerow.style.top = "205px"; timerow.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + i + '</span>'; ic.appendChild(timerow); var cptrow = document.createElement("div"); cptrow.id = "cptrow_" + i + "_" + inCompletePerHour[i]; cptrow.setAttribute("class", "incallchartsumrow"); cptrow.style.width = "10px"; cptrow.style.height = Math.round(topOffsetPercent * inCompletePerHour[i]) + "px"; cptrow.style.position = "absolute"; cptrow.style.background = "none repeat scroll 0 0 #92be0f"; cptrow.style.left = (i * 10) * 2 + 10 + (i * 6) + 40 + "px"; cptrow.style.display = "block"; cptrow.style.top = 200 - Math.round(topOffsetPercent * inCompletePerHour[i]) + "px"; ic.appendChild(cptrow); } //繪制標(biāo)尺線 for (var i = 0; i < 5; i++) { var tity = document.createElement("div"); tity.setAttribute("class", "tity"); tity.style.width = "30px"; tity.style.position = "absolute"; tity.style.top = (36 * i) + (20 - 6) + "px"; tity.style.left = "15px"; tity.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + Math.round(inCallMax - (inCallMax / 5) * i) + '</span>'; ic.appendChild(tity); var liney = document.createElement("div"); liney.setAttribute("style", "width:620px; left:40px; border-top:1px dotted #B9B9B9; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; "); liney.style.top = (36 * i) + 20 + "px"; ic.appendChild(liney); } } else { icArea.innerHTML = '<div style="color:#0066cc; font-size:12px; margin:20px 0 0 80px;">暫無(wú)統(tǒng)計(jì)數(shù)據(jù)</div>'; } } //鼠標(biāo)提示顯示24小時(shí)實(shí)時(shí)>》呼入《<監(jiān)控的詳細(xì)數(shù)據(jù) function toShowTipMessage() { var nodes = document.getElementById("TwentyFourHourChart").getElementsByTagName("div"); for (var i = 0; i < nodes.length; i++) { nodes[i].onmouseover = function () { var temp = this.id.split("_"); var type = temp[0]; var hour = temp[1]; var times = temp[2]; var tipMessage = ""; var tip = document.createElement("div"); tip.id = "TipMessage"; tip.style.position = "absolute"; tip.style.top = (parseInt(document.getElementById(this.id).style.top.replace("px", "")) - 20) + "px"; tip.style.left = document.getElementById(this.id).style.left; if (type == "sumrow") { tipMessage = "今日" + hour + "時(shí)呼入" + times; } else if (type == "cptrow") { tipMessage = "今日" + hour + "時(shí)已接" + times; } tip.innerHTML = '<span style="font-size:12px; display:block; height:20px; background-color:#ffffff; padding:0px 2px; line-height:20px;">' + tipMessage + '</span>'; document.getElementById("TwentyFourHourChart").appendChild(tip); } nodes[i].onmouseout = function () { var tip = document.getElementById("TipMessage"); document.getElementById("TwentyFourHourChart").removeChild(tip); } } } </script> </head> <body>  <div   class="eqmd7nz"   id="consuming_time"></div> <div   class="ul7grou"   id="TwentyFourHourChart"> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

這個(gè)圖表做完了，還有點(diǎn)小小的遺憾，就是那個(gè)困擾我的，firebug調(diào)試狀態(tài)，鼠標(biāo)移動(dòng)到水平標(biāo)尺線上，報(bào)錯(cuò)??！

總結(jié)一下：javascript操作dom元素的基本功。繪制圖表之前要有一個(gè)草稿，對(duì)于復(fù)雜的圖表，必須在紙上畫(huà)出來(lái)，才能有一個(gè)清晰的思維，開(kāi)始進(jìn)行編碼。

代碼打包下載

您可能感興趣的文章: