柱状图-jquery

hackcat 2013-01-17


柱状图-jquery 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
  padding:0;
  margin:0;
}
body{
  margin-top:20px;
  margin-left:20px;
}
#out_div{
  width:500px;
  height:350px;
  border:1px solid #000;
}
.title{
  height:30px;
  text-align:center;
  line-height:30px;
  font-size:18px;
  font-weight:bold;
  margin-bottom:10px;
}
.l{
  height:24px;
  padding-left:20px;
  padding-right:20px;
  float:left;
  width:450px;
}
.l dd{
  float:left;
}
.l1{
  width:50px;
  height:24px;
  display:block;
  line-height:24px;
  float:left;
}
.l2{
  width:4px;
  height:24px;
  border-top:1px solid #000;
  border-right:1px solid #000;
  float:left;
}
.l3{
  height:24px;
  line-height:24px;
  float:left;
}
.l3 .rect{
  height:14px;
  width:100px;
  background-color:#00F;
  margin-top:4px;
  float:left;
}
.l3 span{
  float:left;
  display:block;
  margin-left:10px;
}
.b2{
  width:4px;
  height:8px;
  display:block;
  border-top:1px solid #000;
  border-right:1px solid #000;
  float:left;
}
.b3{
  float:left;
  height:30px;
  display:block;
  width:380px;
}
.b11,.b22{
  display:block;
  float:left;
}
.b11 dd{
  height:5px;
  width:49px;
  display:block;
  float:left;
  border-right:1px solid #000;
  border-top:1px solid #000;
}
dd.end{
  width:20px;
  border-right:none;
}
.b22{
  margin-left:-5px;
  margin-top:5px;
}
.b22 dd{
  height:20px;
  width:49px;
  display:block;
  border-right:1px solid #fff;
}
.bottom{
  margin-top:10px;
  float:left;
  margin-left:200px;
}
.unit{
  width:12px;
  height:12px;
  display:block;
  background:blue;
  float:left;
  margin-right:10px;
}
</style>

</head>

<body>

<script>
/*
*  柱状图;
*  ie8,ff,opera中可用,其他浏览器未测;
*  ********made by keimon*********
*  **********2013-01-17*************
*/
function chart(d){
  var n=50;
  var out = document.createElement('div');
  $(out).attr('id','out_div');
  var title = document.createElement('div');
  $(title).addClass('title');
  $(title).html(d.title);
  $(out).append($(title));
  var len = d.data.length;
  for(var i=0; i<len; i++){
    var dl = document.createElement('dl');
 $(dl).addClass('l');
 var d1 = document.createElement('dd');
 $(d1).addClass('l1');
 var d2 = document.createElement('dd');
 $(d2).addClass('l2');
 var d3 = document.createElement('dd');
 $(d3).addClass('l3');
 var rect = document.createElement('div');
 $(rect).addClass('rect');
 $(rect).css('width',d.data[i].v/n*50)
 var num = document.createElement('span');
 $(num).html(d.data[i].v)
 $(d3).append($(rect)).append($(num));
 $(dl).append($(d1)).append($(d2)).append($(d3));
 $(out).append($(dl)); //
  }
 
  var dl2 = document.createElement('dl');
  $(dl2).addClass('l');
  var dd1 = document.createElement('dd');
  $(dd1).addClass('l1');
  var dd2 = document.createElement('dd');
  $(dd2).addClass('b2');
  var dd3 = document.createElement('dd');
  $(dd3).addClass('b3');
  var b11 = document.createElement('dl');
  $(b11).addClass('b11')
  for(var i=0; i<6; i++){
    var dd11 = document.createElement('dd');
 $(b11).append($(dd11));
  }
 
  var b22 = document.createElement('dl');
  $(b22).addClass('b22')
  for(var i=0; i<6; i++){
    var dd22 = document.createElement('dd');
 $(dd22).html(i*n);
 $(b22).append($(dd22))
  }
  $(dd3).append($(b11)).append($(b22));
  $(dl2).append($(dd1)).append($(dd2)).append($(dd3));
  $(out).append($(dl2)); //
 
  var bottom = document.createElement('div');
  $(bottom).addClass('bottom');
  var span = document.createElement('span');
  $(span).addClass('unit');
  var em = document.createElement('em');
  $(em).html(d.list[0]);
  $(bottom).append($(span)).append($(em));
  $(out).append($(bottom)); //
  $('body').append($(out));
}


function showchart()
{
    var d = {
     "title": "在线人数",
        "list": ["在线人数"],
        "data":[
          {"n":"1小时","v":200},
                {"n":"2小时","v":100},
                {"n":"3小时","v":130},
                {"n":"4小时","v":160},
                {"n":"5小时","v":200},
                {"n":"6小时","v":136},
    {"n":"7小时","v":240},
    {"n":"7小时","v":40}
      ]
        };
    chart(d);
}

showchart()
</script>
</body>
</html>

相关推荐