js使用div元素画柱形图

 1 // 新增一个柱子
 2    function addone(height,width,distance,value){
 3     var wrap = document.getElementById("chart");
 4     var div = document.createElement("div");
 5     //div.setAttribute("style","height:"+value+"px");
 6     div.setAttribute("style","background-color:blue;display:inline-block;margin-top:0px;margin-bottom:0;margin-left:0");
 7     div.style.height=height;
 8     // 设置宽度
 9     if (width > 20) {
10       div.style.width=20;
11     }
12     else{
13       div.style.width=width;
14     }
15     div.style.marginRight=distance;
16     // 设置颜色
17     if (height >= 400*0.8){
18       div.style.backgroundColor="black";
19     }
20     else if (height >= 400*0.6 && height < 400*0.8) {
21       div.style.backgroundColor="purple";
22     }
23     else if (height >= 400*0.4 && height < 400*0.6) {
24       div.style.backgroundColor="red";
25     }
26     else if (height >= 400*0.2 && height < 400*0.4) {
27       div.style.backgroundColor="blue";
28     }
29     else{
30       div.style.backgroundColor="green";
31     }
32     div.setAttribute("name","chart");
33     div.setAttribute("value",value);
34     div.onmouseover = function(){
35       document.title = div.getAttribute("value");
36       var divInfo = document.createElement("div");
37       var txt = document.createTextNode("时间和指数： "+div.getAttribute("value"));
38       divInfo.appendChild(txt);
39       divInfo.style.textAlign = "center";
40       divInfo.style.color = "red";
41       divInfo.setAttribute("id","dateInfo");
42       divInfo.style.padding = 10;
43       var chart = document.getElementById("chart");
44       document.body.insertBefore(divInfo,chart);
45     }
46     div.onmouseout = function(){
47       document.title = "task17";
48       var div = document.getElementById("dateInfo");
49       document.body.removeChild(div);
50     }
51     wrap.appendChild(div);
52    }