<!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="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向柱形图 blog.lrenwang.com-纵横出品</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
/**
* 横向柱形图
*
* @author 纵横(lrenwang)
* @email lrenwang@qq.com
* @blog blog.lrenwang.com
* @qq 3142442
* @version 1.2
* 兼容 IE7 FireFox
*/
var bar = function (id,title,data){
//展示的id
this.id = '';
//标题
this.title = '';
//数据
this.data = '';
//宽
this.width = 500;
//背景图片位置
this.bgimg = 'images/plan.gif';
//动画速度
this.speed = 1000;
//投票总数
var num_all = 0;
this.show = function (){
//添加一个table对象
$("#"+this.id).append("<table width='"+this.width+"' cellpadding=0 cellspacing=6 border=0 style='font-size:12px;' ></table>")
$("#"+this.id+" table").append("<tr><td colspan=3 align='center' ><span style='font:900 14px ;color:#444'>"+this.title+"</span></td></tr>")
//计算总数
$(this.data).each(function(i,n){
num_all += parseInt(n[1]);
})
var that = this;
//起始
var s_img = [0,-52,-104,-156,-208];
//中间点起始坐标
var c_img = [-312,-339,-367,-395,-420];
//结束
var e_img = [-26,-78,-130,-182,-234];
var that = this;
var div;
$(this.data).each(function(i,n){
//计算比例
var bili = (n[1]*100/num_all).toFixed(2);
//计算图片长度, *0.96是为了给前后图片留空间
var img = parseFloat(bili)*0.96;
if(img>0)
{
div = "<div style='width:3px;height:16px;background:url("+that.bgimg+") 0px "+s_img[i]+"px ;float:left;'></div><div fag='"+img+"' style='width:0%;height:16px;background:url("+that.bgimg+") 0 "+c_img[i]+"px repeat-x ;float:left;'></div><div style='width:3px;height:16px;background:url("+that.bgimg+") 0px "+e_img[i]+"px ;float:left;'></div>";
}
else
{
div='';
}
$("#"+that.id+" table").append("<tr><td width='30%' align='right' >"+n[0]+"：</td><td width='60%' bgcolor='#fffae2' >"+div+"</td><td width='10%' nowrap >"+n[1]+"("+bili+"%)</td></tr>")
})
this.play();
}
this.play = function (){
var that = this;
$("#"+this.id+" div").each(function(i,n){
if($(n).attr('fag'))
{
$(n).animate( { width: $(n).attr('fag')+'%'}, that.speed )
}
})
}
}
</script>
</head>
<body>
<div id="show"></div>
<script>
var data = [];
data[0] = ['教育方面','30'];
data[1] = ['医疗卫生','10'];
data[2] = ['旅游环境','22'];
data[3] = ['食品监管','1'];
data[4] = ['生活保障','0'];
var title = '调查问卷';
var bar1 = new bar();
bar1.id = 'show';
bar1.title = title;
bar1.data = data;
bar1.show();
</script>
</body>
</html>
- 1
- 2
- 3
前往页