[置頂] 異步加載統計圖組件（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）
本文路徑：http://vcdvsql.cn/article18/jhgodp.html

成都網站建設公司_創新互聯，為您提供標簽優化、響應式網站、Google、定制網站、微信小程序、電子商務

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

[置頂] 異步加載統計圖組件（jquery+css+div）