javascript实现的柱状统计图表

工作需要，用javascript做一个统计图表：
完成后，做个笔记，大家分享一下，互相学习。其中还有点问题，还不是很完善。
其中参考了百度空间，中管理中心，访问统计，的js统计图表。但是应用上还是有差别，因为我做的这个项目中，需要时实的绘制新的统计表格，当有数据变化的时候，就会调用绘制表格的方法。所以要考虑页面性能的问题。

下面是完成后的预览图，可以看到，绘制一个表格，耗时0.005毫秒，也就是200分之一秒。效率我还是比较满意的！
目前在firefox，chrome，IE8，正常没问题，IE6下有问题，我现在已经不管IE6了，做前端的兄弟们要尽量引导用户放弃IE6啦。

全部代码如下：可复制直接运行。
现在有一个问题，求解，就是在firebug调试状态下，鼠标一旦移动到水平标尺线上，则报错！
哪位知道如何解决这个问题，请不吝赐教！谢谢！

js柱状统计图

/*样式*/
#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; }

window.onload = function () {
var _time = "开始绘制时间：" + 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 += "
绘制完成时间：" + thisMomentTime();
document.getElementById("consuming_time").innerHTML = _time;
//显示提示信息
toShowTipMessage();
};
function thisMomentTime() {
var m = (new Date).getHours() + "时 " + (new Date).getMinutes() + "分 " + (new Date).getSeconds() + "秒 " + (new Date).getMilliseconds() + "毫秒";
return m;
}
/*Array 数组扩展*/
Array.prototype.max = function () {
return Math.max.apply({}, this);
};
Array.prototype.min = function () {
return Math.min.apply({}, this);
};
//绘制24小时分时段呼入图形报表的函数
function toDrawingChart(/*String*/inCallsPerHour, /*String*/inCompletePerHour) {
var ic = document.getElementById("TwentyFourHourChart"); //页面上唯一的一个div，作为图表的容器
if (inCallsPerHour != null) {
var inCallMax = inCallsPerHour.max(); //从传入的数组中取得数组最大值，用到了一个自己写的array的扩展方法max()
var topOffsetPercent = 180 / inCallMax; //计算以最大值为基准的每像素显示比例，百分比
for (var i = 0; i ' + i + '';
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);
}
//绘制标尺线
for (var i = 0; i ' + Math.round(inCallMax - (inCallMax / 5) * i) + '';
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 = '

暂无统计数据

';
}
}
//鼠标提示显示24小时实时>》呼入《' + tipMessage + '';
document.getElementById("TwentyFourHourChart").appendChild(tip);
}
nodes[i].onmouseout = function () {
var tip = document.getElementById("TipMessage");
document.getElementById("TwentyFourHourChart").removeChild(tip);
}
}
}

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

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

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

代码打包下载