JS using div elements to draw a column chart

First, JS use div elements to draw a column chart

The following function defines a column bar with a height, width, and column spacing of distance in the div with the ID chart, and a different color based on the height value, choosing the appropriate maximum width based on the width range. Adds mouse-over and move-out events to the bar, moves to the information that displays the bar, and removes the deletion information.

1 //Add a pillar2    functionAddOne (height,width,distance,value) {3     varWrap = document.getElementById ("Chart");4     vardiv = document.createelement ("div");5     //Div.setattribute ("style", "Height:" +value+ "px");6Div.setattribute ("Style", "background-color:blue;display:inline-block;margin-top:0px;margin-bottom:0; Margin-left:0 ");7div.style.height=height;8     //Set Width9     if(Width > 20) {TenDiv.style.width=20; One     } A     Else{ -Div.style.width=width; -     } thediv.style.marginright=distance; -     //Set Color -     if(Height >= 400*0.8){ -Div.style.backgroundcolor= "BLACK"; +     } -     Else if(Height >= 400*0.6 && Height < 400*0.8) { +Div.style.backgroundcolor= "Purple"; A     } at     Else if(Height >= 400*0.4 && Height < 400*0.6) { -Div.style.backgroundcolor= "Red"; -     } -     Else if(Height >= 400*0.2 && Height < 400*0.4) { -Div.style.backgroundcolor= "Blue"; -     } in     Else{ -Div.style.backgroundcolor= "Green"; to     } +Div.setattribute ("name", "chart"); -Div.setattribute ("Value", value); theDiv.onmouseover =function(){ *Document.title = Div.getattribute ("Value"); $       varDivinfo = document.createelement ("div");Panax Notoginseng       vartxt = document.createTextNode ("Time and Exponent:" +div.getattribute ("value"))); - divinfo.appendchild (TXT); thedivInfo.style.textAlign = "Center"; +DivInfo.style.color = "Red"; ADivinfo.setattribute ("id", "dateinfo"); thedivInfo.style.padding = 10; +       varChart = document.getElementById ("Chart"); - Document.body.insertBefore (divinfo,chart); $     } $Div.onmouseout =function(){ -Document.title = "Task17"; -       vardiv = document.getElementById ("Dateinfo"); the Document.body.removeChild (div); -     }Wuyi Wrap.appendchild (div); the}

Analytical:

1) Document.title to the title of the HTML assignment, title as a special node, through the getElementsByTagName ("title") [0] can get the value of the title, but can not change the value of the title.

2) Obj.onmouseover and obj.onmouseout respectively define the move-in and move-out events of the obj element;

3) Add attributes to the obj element by Obj.setattribute ("name", "value");

4) Set the style to obj by Obj.style.stylename;

JS using div elements to draw a column chart