Column statistical chart implemented by javascript_javascript skills

For work needs, use JavaScript to make a statistical chart:
After completion, make a note and share it with everyone to learn from each other. There are still some problems and it is not perfect yet.
It refers to Baidu Space, Central Management Center, Access Statistics, and js statistical charts. However, there are still differences in application, because in the project I am working on, new statistical tables need to be drawn in real time. When the data changes, the method of drawing the table will be called. So we need to consider the issue of page performance.

The following is the preview after completion. You can see that it takes 0.005 milliseconds to draw a table, which is 1/200th of a second. I am quite satisfied with the efficiency!
Currently, it works normally in firefox, chrome, and IE8, but there is a problem in IE6. I don’t care about IE6 now. The front-end brothers should try their best to guide users to give up IE6.


All codes are as follows: you can copy and run them directly.
Now there is a problem. The solution is that in the firebug debugging state, once the mouse moves to the horizontal ruler line, an error will be reported!
If anyone knows how to solve this problem, please feel free to enlighten me! Thanks!

<title>js histogram </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> <!-- 下面这个div consuming_time 是为了显示左上角，绘制图表耗时显示之用，在实际使用中午用处 --> <div id="consuming_time"> </div> <div id="TwentyFourHourChart"> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute it

]

This chart is finished, and there are still It's a little regretful, that's what bothers me, in the firebug debugging state, when the mouse moves to the horizontal ruler line, an error occurs! !

To summarize: the basic skills of JavaScript to operate DOM elements. Before drawing a diagram, you must have a draft. For complex diagrams, you must draw them on paper before you can have a clear mind and start coding.
Code package download