[置顶] 异步加载统计图组件（jquery+css+div）

操作：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"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>异步加载统计图组件（jquery）</title> </head> <scripttype="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <scriptlanguage="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> <divclass="images" oid="258" ></div> <divclass="images" oid="257"></div> <divclass="images" oid="253"></div> </body> </html>    <scriptlanguage="javascript"> //统计图组件 (function($){        $.fn.zImage= function(options){if(!(optionsinstanceof 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);

网页标题：[置顶] 异步加载统计图组件（jquery+css+div）
本文路径：https://www.cdcxhl.com/article18/jhgodp.html

成都网站建设公司_创新互联，为您提供标签优化、响应式网站、Google、定制网站、微信小程序、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容