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

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

创新互联执着的坚持网站建设，小程序制作；我们不会转行，已经持续稳定运营十多年。专业的技术，丰富的成功经验和创作思维，提供一站式互联网解决方案，以客户的口碑塑造品牌，携手广大客户，共同发展进步。

效果：

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

    异步加载统计图组件（jquery）    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

//统计图组件 (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= $("

").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= $("

").css({width:xW+"px",height:"1px",left:xL+"px",background:bg,position:"absolute",bottom:lxB+"px","font-size":"0px","overflow":"hidden"}); tagX= $("

").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= $("

").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= $("

").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= $("").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= $("

").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= $("

").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)

===============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）
文章链接：http://cqcxhl.cn/article/jhgodp.html