Work, use JavaScript to make a statistical chart:
When you are done, make a note, share and learn from each other. There are still some problems, not very perfect.
A reference to the Baidu Space, central management Center, Access statistics, the JS statistical chart. But the application is still different, because I do this project, need to actually draw a new statistical table, when there are changes in data, will call the method of drawing tables. So consider the issue of page performance.
The following is a finished preview, and you can see that drawing a table takes 0.005 milliseconds, or 200 seconds. I am still more satisfied with the efficiency!
At present in Firefox,chrome,ie8, Normal no problem, IE6 under the problem, I now no matter IE6, do the front of the brothers to try to guide users to give up IE6.
All the code is as follows: can be copied directly run.
Now there is a problem, solve, is in the Firebug debugging state, the mouse once moved to the horizontal ruler line, then the error!
Who knows how to solve this problem, please do not hesitate to enlighten! Thank you!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>js Columnar statistic map </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 = "Start drawing time:" + Thismomentti Me (); 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> Drawing finish Time:" + thismomenttime (); document.getElementById ("Consuming_time"). InnerHTML = _Time Display prompt information toshowtipmessage (); }; function Thismomenttime () {var m = (new date). GetHours () + "Time" + (new date). getminutes () + "min" + (new date). getseconds () + "seconds" + (new Date). Getmilliseconds () + "millisecond"; return m; /*array Array Extension */Array.prototype.max = function () {return Math.max.apply ({}, this); }; Array.prototype.min = function () {return Math.min.apply ({}, this); }; To draw a 24-hour period of time to call in a graphical report function functions Todrawingchart (/*string*/incallsperhour,/*string*/incompleteperhour) {var IC = document.getElementById ("Twentyfourhourchart"); The only div on the page, as a container for the chart (incallsperhour!= null) {var Incallmax = Incallsperhour.max ();//Get the maximum array from the passed-in array, and use a write-yourself Arra extension method of Y Max () var topoffsetpercent = 180/incallmax; Calculates the magnification per pixel based on the maximum value, the percentage for (var i = 0; i < incallsperhour.length; i++) {//Loop 24-hour data var sumrow = Document.createelem ENT ("div"); Create a div element sumrow sumrow.id = "Sumrow_" + i + "_" + incallsperhour[i];//Add id attribute for the DIV element Sumrow just created (here the time, incoming call total data is written to the ID, Useful when displaying this information later on) SUMrow.setattribute ("Class", "Incallchartsumrow"); Add attributes//Set Left of element (each div width is 10px, then the first element should be i*10, because there is also a list of 10 pixel assembly diagram, so also to *2, plus the left 40px margin + each 2 bar chart for the interval between the gap between 6px, so come to the following: Sumrow.style.left = (I * ten) * 2 + (I * 6) + + "px"; The height of the calculation, Math.Round rounding value, the percentage of the base multiplied by the current period of the incoming data, for the height of the statistics sumrow.style.height = Math.Round (Topoffsetpercent * Incallsperhour[i]) + "px"; Sumrow.style.width = "10px"; Width 10px pixel sumrow.style.position = "absolute"; Absolute positioning sumrow.style.overflow = "hidden"; Beyond the partial hidden Sumrow.style.background = "None repeat Scroll 0 0 #1280ef"; Background color Sumrow.style.display = "block"; Block display//distance from the top border of the container, chart height 200 minus the current column chart height sumrow.style.top = 200-math.round (topoffsetpercent * incallsperhour[i)) + " PX "; Ic.appendchild (Sumrow); Add the created Sumcow element to the IC container to var timerow = document.createelement ("div"); Timerow.id = "Timerow_" + i; Timerow.setattribute ("Class", "Callnum"); Timerow.style.left = (Ten * i) * 2 + (I * 6) + + "px"; Timerow.style.width = "10px"; Timerow.style.position = "Absolute "; Timerow.style.top = "205px"; timerow.innerhtml = ' <span > ' + 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 * ten) * 2 + + (I * 6) + + "px"; Cptrow.style.display = "block"; Cptrow.style.top = 200-math.round (topoffsetpercent * incompleteperhour[i]) + "px"; Ic.appendchild (Cptrow); //Draw ruler line 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 = (+ * i) + (20-6) + "px"; Tity.style.left = "15px"; tity.innerhtml = ' <span > ' + 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 = (+ * i) + + "px"; Ic.appendchild (Liney); } else {icarea.innerhtml = ' <div > Temporary no statistics </div> '; }//mouse prompts display 24 hours real time > "Inbound < monitoring details function toshowtipmessage () {var nodes = document.getElementById (" Twentyfourhou Rchart "). 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", "")) + "px"; Tip.style. left = document.getElementById (this.id). Style.left; if (type = = "Sumrow") {tipmessage = "Today" + hour + "when incoming" + times; else if (type = = "Cptrow") {tipmessage = "Today" + Hour + "when" + times; } tip.innerhtml = ' <span > ' + tipmessage + ' </span> '; document.getElementById ("Twentyfourhourchart"). AppendChild (TIP); } nodes[i].onmouseout = function () {var tip = document.getElementById ("Tipmessage"); document.getElementById ("Twentyfourhourchart"). RemoveChild (TIP); !--below this div consuming_time is to show the upper left corner, to draw a chart that is time-consuming to display, and to use in the actual noon--> <div id= "Consuming_time" ></div> <div id= "Twentyfourhourchart" > </div> </body> </ptm L>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This chart is done, still a little regret, is that that bothers me, Firebug debug state, the mouse moved to the horizontal ruler line, the error!!
To summarize: JavaScript operates the basics of DOM elements. Before you draw a chart, you have to have a draft, and for a complex diagram, you have to draw it on paper to have a clear mind and start coding.
Code package download
