javascript实现的柱状统计图表

　　工作需要，用javascript做一个统计图表：

　　完成后，做个笔记，大家分享一下，互相学习。其中还有点问题，还不是很完善。

　　其中参考了百度空间，中管理中心，访问统计，的js统计图表。但是应用上还是有差别，因为我做的这个项目中，需要时实的绘制新的统计表格，当有数据变化的时候，就会调用绘制表格的方法。所以要考虑页面性能的问题。

　　下面是完成后的预览图，可以看到，绘制一个表格，耗时0.005毫秒，也就是200分之一秒。效率我还是比较满意的！

　　目前在firefox，chrome，IE8，正常没问题，IE6下有问题，我现在已经不管IE6了，做前端的兄弟们要尽量引导用户放弃IE6啦。

javascript实现的柱状统计图表

　　全部代码如下：可复制直接运行。

　　现在有一个问题，求解，就是在firebug调试状态下，鼠标一旦移动到水平标尺线上，则报错！

　　哪位知道如何解决这个问题，请不吝赐教！谢谢！

<!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柱状统计图</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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Awindow.onload%20%3D%20function%20()%20%7B%20%0D%0Avar%20_time%20%3D%20%22%E5%BC%80%E5%A7%8B%E7%BB%98%E5%88%B6%E6%97%B6%E9%97%B4%EF%BC%9A%22%20%2B%20thisMomentTime()%3B%20%0D%0AtoDrawingChart(%5B15%2C%2026%2C%2032%2C%2033%2C%2044%2C%2055%2C%2066%2C%2057%2C%2088%2C%2092%2C%2067%2C%2042%2C%2045%2C%2061%2C%20105%2C%2033%2C%2024%2C%2015%2C%2036%2C%2027%2C%2028%2C%2029%2C%2010%2C%2022%5D%2C%20%5B10%2C%2020%2C%2022%2C%2023%2C%2030%2C%2035%2C%2050%2C%2040%2C%2062%2C%2078%2C%2060%2C%2040%2C%2025%2C%2058%2C%2095%2C%2015%2C%2020%2C%208%2C%2025%2C%2020%2C%2018%2C%2020%2C%205%2C%2012%5D)%3B%20%0D%0A_time%20%2B%3D%20%22%3Cbr%3E%E7%BB%98%E5%88%B6%E5%AE%8C%E6%88%90%E6%97%B6%E9%97%B4%EF%BC%9A%22%20%2B%20thisMomentTime()%3B%20%0D%0Adocument.getElementById(%22consuming_time%22).innerHTML%20%3D%20_time%3B%20%0D%0A%2F%2F%E6%98%BE%E7%A4%BA%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%20%0D%0AtoShowTipMessage()%3B%20%0D%0A%7D%3B%20%0D%0Afunction%20thisMomentTime()%20%7B%20%0D%0Avar%20m%20%3D%20(new%20Date).getHours()%20%2B%20%22%E6%97%B6%20%22%20%2B%20(new%20Date).getMinutes()%20%2B%20%22%E5%88%86%20%22%20%2B%20(new%20Date).getSeconds()%20%2B%20%22%E7%A7%92%20%22%20%2B%20(new%20Date).getMilliseconds()%20%2B%20%22%E6%AF%AB%E7%A7%92%22%3B%20%0D%0Areturn%20m%3B%20%0D%0A%7D%20%0D%0A%2F*Array%20%E6%95%B0%E7%BB%84%E6%89%A9%E5%B1%95*%2F%20%0D%0AArray.prototype.max%20%3D%20function%20()%20%7B%20%0D%0Areturn%20Math.max.apply(%7B%7D%2C%20this)%3B%20%0D%0A%7D%3B%20%0D%0AArray.prototype.min%20%3D%20function%20()%20%7B%20%0D%0Areturn%20Math.min.apply(%7B%7D%2C%20this)%3B%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E7%BB%98%E5%88%B624%E5%B0%8F%E6%97%B6%E5%88%86%E6%97%B6%E6%AE%B5%E5%91%BC%E5%85%A5%E5%9B%BE%E5%BD%A2%E6%8A%A5%E8%A1%A8%E7%9A%84%E5%87%BD%E6%95%B0%20%0D%0Afunction%20toDrawingChart(%2F*String*%2FinCallsPerHour%2C%20%2F*String*%2FinCompletePerHour)%20%7B%20%0D%0Avar%20ic%20%3D%20document.getElementById(%22TwentyFourHourChart%22)%3B%20%2F%2F%E9%A1%B5%E9%9D%A2%E4%B8%8A%E5%94%AF%E4%B8%80%E7%9A%84%E4%B8%80%E4%B8%AAdiv%EF%BC%8C%E4%BD%9C%E4%B8%BA%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%AE%B9%E5%99%A8%20%0D%0Aif%20(inCallsPerHour%20!%3D%20null)%20%7B%20%0D%0Avar%20inCallMax%20%3D%20inCallsPerHour.max()%3B%20%2F%2F%E4%BB%8E%E4%BC%A0%E5%85%A5%E7%9A%84%E6%95%B0%E7%BB%84%E4%B8%AD%E5%8F%96%E5%BE%97%E6%95%B0%E7%BB%84%E6%9C%80%E5%A4%A7%E5%80%BC%EF%BC%8C%E7%94%A8%E5%88%B0%E4%BA%86%E4%B8%80%E4%B8%AA%E8%87%AA%E5%B7%B1%E5%86%99%E7%9A%84array%E7%9A%84%E6%89%A9%E5%B1%95%E6%96%B9%E6%B3%95max()%20%0D%0Avar%20topOffsetPercent%20%3D%20180%20%2F%20inCallMax%3B%20%2F%2F%E8%AE%A1%E7%AE%97%E4%BB%A5%E6%9C%80%E5%A4%A7%E5%80%BC%E4%B8%BA%E5%9F%BA%E5%87%86%E7%9A%84%E6%AF%8F%E5%83%8F%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%AF%94%E4%BE%8B%EF%BC%8C%E7%99%BE%E5%88%86%E6%AF%94%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20inCallsPerHour.length%3B%20i%2B%2B)%20%7B%20%2F%2F%E5%BE%AA%E7%8E%AF24%E5%B0%8F%E6%97%B6%E6%95%B0%E6%8D%AE%20%0D%0Avar%20sumrow%20%3D%20document.createElement(%22div%22)%3B%20%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAdiv%E5%85%83%E7%B4%A0sumrow%20%0D%0Asumrow.id%20%3D%20%22sumrow_%22%20%2B%20i%20%2B%20%22_%22%20%2B%20inCallsPerHour%5Bi%5D%3B%2F%2F%E4%B8%BA%E5%88%9A%E5%88%9A%E5%88%9B%E5%BB%BA%E7%9A%84div%E5%85%83%E7%B4%A0sumrow%E6%B7%BB%E5%8A%A0id%E5%B1%9E%E6%80%A7%EF%BC%88%E8%BF%99%E9%87%8C%E6%8A%8A%E6%97%B6%E9%97%B4%EF%BC%8C%E5%91%BC%E5%85%A5%E7%94%B5%E8%AF%9D%E6%80%BB%E9%87%8F%E6%95%B0%E6%8D%AE%E5%86%99%E5%85%A5%E5%88%B0id%E4%B8%AD%EF%BC%8C%E5%90%8E%E9%9D%A2%E6%98%BE%E7%A4%BA%E8%BF%99%E4%BA%9B%E4%BF%A1%E6%81%AF%E7%9A%84%E6%97%B6%E5%80%99%E6%9C%89%E7%94%A8%EF%BC%89%20%0D%0Asumrow.setAttribute(%22class%22%2C%20%22incallchartsumrow%22)%3B%20%2F%2F%E6%B7%BB%E5%8A%A0%E5%B1%9E%E6%80%A7%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E7%9A%84left%EF%BC%88%E6%AF%8F%E4%B8%AAdiv%E5%AE%BD%E5%BA%A6%E4%B8%BA10px%EF%BC%8C%E9%82%A3%E4%B9%88%E7%AC%ACi%E4%B8%AA%E5%85%83%E7%B4%A0%E5%B0%B1%E5%BA%94%E8%AF%A5%E6%98%AFi*10%EF%BC%8C%E5%9B%A0%E4%B8%BA%E8%BF%98%E6%9C%89%E4%B8%80%E5%88%9710%E5%83%8F%E7%B4%A0%E7%9A%84%E7%BB%84%E8%A3%85%E5%9B%BE%EF%BC%8C%E6%89%80%E4%BB%A5%E8%BF%98%E8%A6%81*2%EF%BC%8C%E5%8A%A0%E4%B8%8A%E8%B7%9D%E7%A6%BB%E5%B7%A6%E4%BE%A740px%E8%BE%B9%E8%B7%9D%20%2B%20%E6%AF%8F2%E4%B8%AA%E6%9F%B1%E7%8A%B6%E5%9B%BE%E4%B8%BA%E4%B8%80%E7%BB%84%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E9%9A%94%E7%A9%BA%E9%9A%996px%EF%BC%8C%E6%89%80%E4%BB%A5%E5%BE%97%E5%87%BA%E5%A6%82%E4%B8%8B%EF%BC%8C%EF%BC%89%20%0D%0Asumrow.style.left%20%3D%20(i%20*%2010)%20*%202%20%2B%20(i%20*%206)%20%2B%2040%20%2B%20%22px%22%3B%20%0D%0A%2F%2F%E9%AB%98%E5%BA%A6%E7%9A%84%E8%AE%A1%E7%AE%97%EF%BC%8CMath.round%E5%9B%9B%E8%88%8D%E4%BA%94%E5%85%A5%E5%8F%96%E5%80%BC%EF%BC%8C%E7%99%BE%E5%88%86%E6%AF%94%E7%9A%84%E5%9F%BA%E6%95%B0%20%E4%B9%98%E4%BB%A5%20%E5%BD%93%E5%89%8D%E6%97%B6%E6%AE%B5%E7%9A%84%E5%91%BC%E5%85%A5%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%B8%BA%E7%BB%9F%E8%AE%A1%E5%9B%BE%E7%9A%84%E9%AB%98%E5%BA%A6%20%0D%0Asumrow.style.height%20%3D%20Math.round(topOffsetPercent%20*%20inCallsPerHour%5Bi%5D)%20%2B%20%22px%22%3B%20%0D%0Asumrow.style.width%20%3D%20%2210px%22%3B%20%2F%2F%E5%AE%BD%E5%BA%A610px%E5%83%8F%E7%B4%A0%20%0D%0Asumrow.style.position%20%3D%20%22absolute%22%3B%20%2F%2F%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%20%0D%0Asumrow.style.overflow%20%3D%20%22hidden%22%3B%20%2F%2F%E8%B6%85%E5%87%BA%E9%83%A8%E5%88%86%E9%9A%90%E8%97%8F%20%0D%0Asumrow.style.background%20%3D%20%22none%20repeat%20scroll%200%200%20%231280ef%22%3B%20%2F%2F%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%20%0D%0Asumrow.style.display%20%3D%20%22block%22%3B%20%2F%2F%E5%9D%97%E7%8A%B6%E6%98%BE%E7%A4%BA%20%0D%0A%2F%2F%E8%B7%9D%E7%A6%BB%E5%AE%B9%E5%99%A8%E4%B8%8A%E8%BE%B9%E6%A1%86%E7%9A%84%E8%B7%9D%E7%A6%BB%EF%BC%8C%E5%9B%BE%E8%A1%A8%E9%AB%98%E5%BA%A6200%20%E5%87%8F%E5%8E%BB%20%E5%BD%93%E5%89%8D%E8%BF%99%E4%B8%AA%E6%9F%B1%E7%8A%B6%E5%9B%BE%E5%9B%BE%E8%A1%A8%E9%AB%98%E5%BA%A6%20%0D%0Asumrow.style.top%20%3D%20200%20-%20Math.round(topOffsetPercent%20*%20inCallsPerHour%5Bi%5D)%20%2B%20%22px%22%3B%20%0D%0Aic.appendChild(sumrow)%3B%20%2F%2F%E5%B0%86%E5%88%9B%E5%BB%BA%E7%9A%84sumcow%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E5%88%B0ic%E5%AE%B9%E5%99%A8%E4%B8%AD%E5%8E%BB%20%0D%0Avar%20timerow%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Atimerow.id%20%3D%20%22timerow_%22%20%2B%20i%3B%20%0D%0Atimerow.setAttribute(%22class%22%2C%20%22callnum%22)%3B%20%0D%0Atimerow.style.left%20%3D%20(10%20*%20i)%20*%202%20%2B%20(i%20*%206)%20%2B%2040%20%2B%20%22px%22%3B%20%0D%0Atimerow.style.width%20%3D%20%2210px%22%3B%20%0D%0Atimerow.style.position%20%3D%20%22absolute%22%3B%20%0D%0Atimerow.style.top%20%3D%20%22205px%22%3B%20%0D%0Atimerow.innerHTML%20%3D%20'%3Cspan%20style%3D%22font-size%3A12px%3B%20color%3A%23666666%3B%22%3E%20'%20%2B%20i%20%2B%20'%3C%2Fspan%3E'%3B%20%0D%0Aic.appendChild(timerow)%3B%20%0D%0Avar%20cptrow%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Acptrow.id%20%3D%20%22cptrow_%22%20%2B%20i%20%2B%20%22_%22%20%2B%20inCompletePerHour%5Bi%5D%3B%20%0D%0Acptrow.setAttribute(%22class%22%2C%20%22incallchartsumrow%22)%3B%20%0D%0Acptrow.style.width%20%3D%20%2210px%22%3B%20%0D%0Acptrow.style.height%20%3D%20Math.round(topOffsetPercent%20*%20inCompletePerHour%5Bi%5D)%20%2B%20%22px%22%3B%20%0D%0Acptrow.style.position%20%3D%20%22absolute%22%3B%20%0D%0Acptrow.style.background%20%3D%20%22none%20repeat%20scroll%200%200%20%2392be0f%22%3B%20%0D%0Acptrow.style.left%20%3D%20(i%20*%2010)%20*%202%20%2B%2010%20%2B%20(i%20*%206)%20%2B%2040%20%2B%20%22px%22%3B%20%0D%0Acptrow.style.display%20%3D%20%22block%22%3B%20%0D%0Acptrow.style.top%20%3D%20200%20-%20Math.round(topOffsetPercent%20*%20inCompletePerHour%5Bi%5D)%20%2B%20%22px%22%3B%20%0D%0Aic.appendChild(cptrow)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E7%BB%98%E5%88%B6%E6%A0%87%E5%B0%BA%E7%BA%BF%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%205%3B%20i%2B%2B)%20%7B%20%0D%0Avar%20tity%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Atity.setAttribute(%22class%22%2C%20%22tity%22)%3B%20%0D%0Atity.style.width%20%3D%20%2230px%22%3B%20%0D%0Atity.style.position%20%3D%20%22absolute%22%3B%20%0D%0Atity.style.top%20%3D%20(36%20*%20i)%20%2B%20(20%20-%206)%20%2B%20%22px%22%3B%20%0D%0Atity.style.left%20%3D%20%2215px%22%3B%20%0D%0Atity.innerHTML%20%3D%20'%3Cspan%20style%3D%22font-size%3A12px%3B%20color%3A%23666666%3B%22%3E%20'%20%2B%20Math.round(inCallMax%20-%20(inCallMax%20%2F%205)%20*%20i)%20%2B%20'%3C%2Fspan%3E'%3B%20%0D%0Aic.appendChild(tity)%3B%20%0D%0Avar%20liney%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Aliney.setAttribute(%22style%22%2C%20%22width%3A620px%3B%20left%3A40px%3B%20border-top%3A1px%20dotted%20%23B9B9B9%3B%20height%3A1px%3B%20line-height%3A1px%3B%20display%3Ablock%3B%20overflow%3Ahidden%3B%20position%3Aabsolute%3B%20%22)%3B%20%0D%0Aliney.style.top%20%3D%20(36%20*%20i)%20%2B%2020%20%2B%20%22px%22%3B%20%0D%0Aic.appendChild(liney)%3B%20%0D%0A%7D%20%0D%0A%7D%20else%20%7B%20%0D%0AicArea.innerHTML%20%3D%20'%3Cdiv%20style%3D%22color%3A%230066cc%3B%20font-size%3A12px%3B%20margin%3A20px%200%200%2080px%3B%22%3E%E6%9A%82%E6%97%A0%E7%BB%9F%E8%AE%A1%E6%95%B0%E6%8D%AE%3C%2Fdiv%3E'%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E6%8F%90%E7%A4%BA%E6%98%BE%E7%A4%BA24%E5%B0%8F%E6%97%B6%E5%AE%9E%E6%97%B6%3E%E3%80%8B%E5%91%BC%E5%85%A5%E3%80%8A%3C%E7%9B%91%E6%8E%A7%E7%9A%84%E8%AF%A6%E7%BB%86%E6%95%B0%E6%8D%AE%20%0D%0Afunction%20toShowTipMessage()%20%7B%20%0D%0Avar%20nodes%20%3D%20document.getElementById(%22TwentyFourHourChart%22).getElementsByTagName(%22div%22)%3B%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20nodes.length%3B%20i%2B%2B)%20%7B%20%0D%0Anodes%5Bi%5D.onmouseover%20%3D%20function%20()%20%7B%20%0D%0Avar%20temp%20%3D%20this.id.split(%22_%22)%3B%20%0D%0Avar%20type%20%3D%20temp%5B0%5D%3B%20%0D%0Avar%20hour%20%3D%20temp%5B1%5D%3B%20%0D%0Avar%20times%20%3D%20temp%5B2%5D%3B%20%0D%0Avar%20tipMessage%20%3D%20%22%22%3B%20%0D%0Avar%20tip%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Atip.id%20%3D%20%22TipMessage%22%3B%20%0D%0Atip.style.position%20%3D%20%22absolute%22%3B%20%0D%0Atip.style.top%20%3D%20(parseInt(document.getElementById(this.id).style.top.replace(%22px%22%2C%20%22%22))%20-%2020)%20%2B%20%22px%22%3B%20%0D%0Atip.style.left%20%3D%20document.getElementById(this.id).style.left%3B%20%0D%0Aif%20(type%20%3D%3D%20%22sumrow%22)%20%7B%20%0D%0AtipMessage%20%3D%20%22%E4%BB%8A%E6%97%A5%22%20%2B%20hour%20%2B%20%22%E6%97%B6%E5%91%BC%E5%85%A5%22%20%2B%20times%3B%20%0D%0A%7D%20else%20if%20(type%20%3D%3D%20%22cptrow%22)%20%7B%20%0D%0AtipMessage%20%3D%20%22%E4%BB%8A%E6%97%A5%22%20%2B%20hour%20%2B%20%22%E6%97%B6%E5%B7%B2%E6%8E%A5%22%20%2B%20times%3B%20%0D%0A%7D%20%0D%0Atip.innerHTML%20%3D%20'%3Cspan%20style%3D%22font-size%3A12px%3B%20display%3Ablock%3B%20height%3A20px%3B%20background-color%3A%23ffffff%3B%20padding%3A0px%202px%3B%20line-height%3A20px%3B%22%3E'%20%2B%20tipMessage%20%2B%20'%3C%2Fspan%3E'%3B%20%0D%0Adocument.getElementById(%22TwentyFourHourChart%22).appendChild(tip)%3B%20%0D%0A%7D%20%0D%0Anodes%5Bi%5D.onmouseout%20%3D%20function%20()%20%7B%20%0D%0Avar%20tip%20%3D%20document.getElementById(%22TipMessage%22)%3B%20%0D%0Adocument.getElementById(%22TwentyFourHourChart%22).removeChild(tip)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
 
<div id="consuming_time"></div> 
<div id="TwentyFourHourChart"> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　这个图表做完了，还有点小小的遗憾，就是那个困扰我的，firebug调试状态，鼠标移动到水平标尺线上，报错！！

　　总结一下：javascript操作dom元素的基本功。绘制图表之前要有一个草稿，对于复杂的图表，必须在纸上画出来，才能有一个清晰的思维，开始进行编码。

　　代码打包下载

教程首页更多教程