jquery 横向柱形图

最新推荐文章于 2023-03-13 14:56:51 发布

danns888

最新推荐文章于 2023-03-13 14:56:51 发布

阅读量1.5k

点赞数

文章标签： jquery function table div float xhtml

<!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>

danns888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery 横向柱形图

横向柱形图 blog.lrenwang.com-纵横出品/*** 横向柱形图* * @author 纵横(lrenwang)* @email [email protected]* @blog blog.lrenwang.com* @qq 3142442* @version 1.2* 兼容 IE7 FireFox*/var bar = f
复制链接

扫一扫