资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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

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

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

效果：

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

 

===============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://cdkjz.cn/article/jhgodp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
软文营销成都小程序制作重庆水土三线托管企业官网建设网站建设泸州做网站小谭建站java虚拟主机网站维护报价绵阳服务器托管

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图