js使用div元素画柱形图

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

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

// 新增一个柱子
   function addone(height,width,distance,value){
    var wrap = document.getElementById("chart");
    var div = document.createElement("div");
    //div.setAttribute("style","height:"+value+"px");
    div.setAttribute("style","background-color:blue;display:inline-block;margin-top:0px;margin-bottom:0;margin-left:0");
    div.style.height=height;
    // 设置宽度
    if (width > 20) {
      div.style.width=20;
    }
    else{
      div.style.width=width;
    }
    div.style.marginRight=distance;
    // 设置颜色
    if (height >= 400*0.8){
      div.style.backgroundColor="black";
    }
    else if (height >= 400*0.6 && height < 400*0.8) {
      div.style.backgroundColor="purple";
    }
    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";
    }
    else{
      div.style.backgroundColor="green";
    }
    div.setAttribute("name","chart");
    div.setAttribute("value",value);
    div.onmouseover = function(){
      document.title = div.getAttribute("value");
      var divInfo = document.createElement("div");
      var txt = document.createTextNode("时间和指数： "+div.getAttribute("value"));
      divInfo.appendChild(txt);
      divInfo.style.textAlign = "center";
      divInfo.style.color = "red";
      divInfo.setAttribute("id","dateInfo");
      divInfo.style.padding = 10;
      var chart = document.getElementById("chart");
      document.body.insertBefore(divInfo,chart);
    }
    div.onmouseout = function(){
      document.title = "task17";
      var div = document.getElementById("dateInfo");
      document.body.removeChild(div);
    }
    wrap.appendChild(div);
   }

解析：

　　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设置样式；