js使用div元素画柱形图

一、js使用div元素画柱形图

　　下面函数定义的是在id为chart的div中添加一个高度为height，宽度为width，柱形条间距为distance的柱形条；并根据高度值设置了不同的颜色，根据宽度的范围，选择合适的最大宽度。给柱形条添加了鼠标移入和移出的事件，移入显示该柱形条的信息，移出删除信息。

 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    }

解析：

　　1）document.title给html的title赋值，title作为特殊节点，通过getElementsByTagName("title")[0]能获取title的值，但是不能改变title的值。

　　2）obj.onmouseover和obj.onmouseout分别定义obj元素的移入和移出事件；

　　3）通过obj.setAttribute("name","value")给obj元素添加属性；

　　4）通过obj.style.stylename给obj设置样式；