柱状图-jquery
hackcat 2013-01-17
<!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>
相关推荐
//提供JSON数据，方便 .net、 java、 php 调用。本例在Asp.net MVC2.0下演示。<input type="button" id="btnReloadBar" value="