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