异步加载统计图组件（jquery+css+div）

最新推荐文章于 2026-05-24 11:00:23 发布

转载最新推荐文章于 2026-05-24 11:00:23 发布 · 1.7k 阅读

本文介绍了一种使用jQuery实现的异步加载统计图表的方法。该方法通过动态获取数据并更新DOM来绘制统计图表，包括标题、X轴和Y轴标签、数据条等元素，并支持数据条上的超链接。

操作：http://localhost/test/zimg.html

效果：

===============zimg.html代码===============

<!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=utf-8" />
<title>异步加载统计图组件（jquery）</title>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script language="javascript">
jQuery(function(){
    var i = 0;//起始索引
    var o = $(".images");//统计图对象
    var l = o.length;//统计图的数量
    var options = new Object;//统计图参数    
    odrImage(i);//执行
    function odrImage(i){
        var oi = o.eq(i);
        if(i<l){
            $.get("data.php",{"oid":oi.attr("oid")},function(data){//异步加载
                     if(data){
                         //options.maxval = 1000;//纵轴最大值，默认是自动算
                         options.title = "城市消费统计图-"+i; //标题
                         options.datas = jQuery.parseJSON(data);//数据
                         oi.empty().zImage(options);                    
                         odrImage(++i)
                     }
              })        
         }
        return false;
    }
    
})    
</script>

<body>
<div class="images" oid="258" ></div>
<div class="images" oid="257"></div>
<div class="images" oid="253"></div>
</body>
</html>
 

<script language="javascript">
//统计图组件
(function($){   
    $.fn.zImage = function(options){
        if(!(options instanceof Object)){alert("参数是个对象");return false;}
        var title = 'title' in options ? options.title : "标题";
        var datas = options.hasOwnProperty('datas') ? options.datas : [];
        var total = $.itotal(datas);//总数         
        var length = total.length;//数组长度
        var datas = total.data;//数据
        var tags = total.tag;//标签
        var hrefs = total.href;//连接
        var colors = total.color;//颜色
        //============画布
        var canvas = new Object();
        var cW = 430;//画布的宽
        var cH = 250;//画布的高
        var canvasStyle;
        //默认样式
        if('canvas' in options){
            cW = options.canvas.width ? parseInt(options.canvas.width) : cW;
            cH = options.canvas.height ? parseInt(options.canvas.height) : cH;
            canvasStyle = options.canvas
        }       
        canvas.defaults = {width:cW+"px",height:cH+"px",background:"#FFFFFF",position:"relative"};
        var opts = $.extend(canvas.defaults,canvasStyle);
        this.css(opts);
        //===========标题
        var tH = 30;//标题的高
        var tT = 20;//向上偏移量
        var titleT = $("<div>").css({"position":"relative","text-align":"center","height":tH+"px","font-size":"24px","font-weight":"bold","top":tT+"px"}).text(title);
        this.append(titleT);      
        //===========X轴网格       
        var lineX;//X轴网格线
        var tagX;//x轴tag
        var lxB;//每个网格的下偏移量
        var xB = 30;//下偏移量
        var xL = 50;//左偏移量       
        var lxS = 'numx' in options ? options.numx :6;//网格的数量       
        var txW = 'xw' in options ? options.xw :20;//调节网格间隔基数
        var lxW = (cH-tH-tT-xB-20)/lxS;//网格间隔
        var xW = cW-xL-5;//x轴的长度     
        var showSize;//Y轴显示的最大值
        if('maxval' in options){
            showSize = options.maxval;
        }else{//自动判断Y轴的最大值
            showSize = total.mval;
            var sl = String(showSize).length;
            var sj = new Array(sl).join("0");
            var sc = parseInt("1"+sj);
            var ss;           
            for(var f=1;f<100;f++){
                ss = f*sc*lxS;
                if(ss > showSize){
                    showSize = ss;
                    break;
                }
            }
        }
        var tD = showSize/lxS;//y轴上显示的基数
        var bg;
        for(var i=0;i<=lxS;i++){
            lxB = (i * lxW)+xB;
            tagD = Math.round(i*tD);
            bg = i==0 ? "#000000":"#CCCCCC";
            lineX = $("<div>").css({width:xW+"px",height:"1px",left:xL+"px",background:bg,position:"absolute",bottom:lxB+"px","font-size":"0px","overflow":"hidden"});
            tagX = $("<div>").css({position:"absolute",bottom:lxB+"px",right:(xW+8)+"px","font-size":".8em","color":"#333333","line-height":".8em"}).text(tagD);
            this.append(lineX).append(tagX);
        }
         //===========Y轴网格               
        var lineY;//Y轴网格线
        var tagY;//Y轴tag
        var sizeY;//数据上显示的数值
        var sizeHref;//数值上的链接       
        var lyL;//每个网格的左偏移量      
        var yH = lxW*lxS;//y轴的高
        var yL = 50;//左偏移量
        var lyS = length;//网格数量
        var lyW = (cW-xL-10)/lyS;//网格间隔
        var tdW = 'dw' in options ?options.dw : 20;//调节数据宽度基数
        var dW = (lyW-tdW)>0 ? (lyW-tdW-10) :  lyW-10;//数据宽度
        var yB = xB;//y轴下偏移量
        var dH;//数据的高度
        var dC;//数据的颜色
        for(var i=0;i<=lyS;i++){
            lyL = (i * lyW)+yL;     
            bg=i==0?"#000000":"#CCCCCC";
            if(i>0){               
                dH = Math.round(datas[i]*lxW/tD);     
                dC = colors[i]?    colors[i] : "#FF6600";
                dataY = $("<div>").css({width:dW+"px",height:dH+"px",background:dC,position:"absolute",left:(lyL-(dW+lyW)/2)+"px",bottom:yB+"px","font-size":"0px","overflow":"hidden"});
                tagY = $("<div>").css({position:"absolute",left:(lyL-lyW)+"px",bottom:(yB-20)+"px","text-align":"center",width:lyW+"px","font-size":".8em","color":"#333333"}).text(tags[i]);
                sizeHref = $("<a>").attr({"target":"_blank","href":hrefs[i],'title':tags[i]}).text(datas[i]).css({"text-decoration":"none","color":"#0099CC","font-size":".8em"}).hover(function (){$(this).css("color","#FF0000");},function (){$(this).css("color","#0099CC");});
                sizeY = $("<div>").css({position:"absolute",left:(lyL-lyW)+"px",bottom:(yB+dH+5)+"px","text-align":"center",width:lyW+"px"}).html(sizeHref);
                this.append(tagY).append(dataY).append(sizeY);
            }
            lineY = $("<div>").css({width:"1px",height:yH+"px",background:bg,position:"absolute",left:lyL+"px",bottom:yB+"px"});
            this.append(lineY);       
        }   
    }
    //计算数据总值
    $.itotal = function(array){
        var length = 0;
        var color = [0];
        var href =[0];
        var tag = [0];
        var data = [0];
        var mval = 0;       
        var dt = 0;
        $.each(array,function(k,v){       
            length++;
            dt = parseInt(v['data']);
            mval = mval > dt ? mval:dt;
            data.push(dt);
            href.push(v['href']);           
            color.push(v['color']);           
            tag.push(k);
        })
        //console.log(data);
        return {"mval":mval,"length":length,"data":data,"tag":tag,"href":href,"color":color};
    }
    //取最大值
    $.maxval = function(array){
         var sarray = array.sort(function(a, b){return b-a;});
         return sarray[0];
    }
          
  
})(jQuery)
</script>

===============data.php数据===============

header( 'Content-type: text/html;charset=utf-8' );//设置页面编码
//图一
$cy["258"]["北京"] = array("data"=>500,"href"=>"http://www.baidu.com/s?wd=北京","color"=>"#FF0000");
$cy["258"]["上海"] = array("data"=>800,"href"=>"http://www.baidu.com/s?wd=上海","color"=>"#00FF00");
$cy["258"]["深圳"] = array("data"=>700,"href"=>"http://www.baidu.com/s?wd=深圳","color"=>"#0000FF");
//图二
$cy["257"]["北京"] = array("data"=>500,"href"=>"http://www.baidu.com/s?wd=北京","color"=>"#FF0000");
$cy["257"]["深圳"] = array("data"=>700,"href"=>"http://www.baidu.com/s?wd=深圳","color"=>"#0000FF");
$cy["257"]["天津"] = array("data"=>300,"href"=>"http://www.baidu.com/s?wd=天津","color"=>"#FFFF00");
//图三
$cy["253"]["北京"] = array("data"=>500,"href"=>"http://www.baidu.com/s?wd=北京","color"=>"#FF0000");
$cy["253"]["上海"] = array("data"=>800,"href"=>"http://www.baidu.com/s?wd=上海","color"=>"#00FF00");
$cy["253"]["深圳"] = array("data"=>700,"href"=>"http://www.baidu.com/s?wd=深圳","color"=>"#0000FF");
$cy["253"]["天津"] = array("data"=>300,"href"=>"http://www.baidu.com/s?wd=天津","color"=>"#FFFF00");

if($ct = $cy[$_GET["oid"]]){echo json_encode($ct);}
sleep(1);