溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
操作：http://localhost/test/zimg.html
效果：
![[置頂] 異步加載統(tǒng)計(jì)圖組件（jquery+css+div）](http://pic002.cnblogs.com/images/2012/476844/2012121211190836.png)
===============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>異步加載統(tǒng)計(jì)圖組件（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");//統(tǒng)計(jì)圖對(duì)象 var l = o.length;//統(tǒng)計(jì)圖的數(shù)量 var options = new Object;//統(tǒng)計(jì)圖參數(shù) odrImage(i);//執(zhí)行 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;//縱軸最大值，默認(rèn)是自動(dòng)算 options.title = "城市消費(fèi)統(tǒng)計(jì)圖-"+i; //標(biāo)題 options.datas = jQuery.parseJSON(data);//數(shù)據(jù) 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"> //統(tǒng)計(jì)圖組件 (function($){ $.fn.zImage = function(options){ if(!(options instanceof Object)){alert("參數(shù)是個(gè)對(duì)象");return false;} var title = 'title' in options ? options.title : "標(biāo)題"; var datas = options.hasOwnProperty('datas') ? options.datas : []; var total = $.itotal(datas);//總數(shù) var length = total.length;//數(shù)組長(zhǎng)度 var datas = total.data;//數(shù)據(jù) var tags = total.tag;//標(biāo)簽 var hrefs = total.href;//連接 var colors = total.color;//顏色 //============畫(huà)布 var canvas = new Object(); var cW = 430;//畫(huà)布的寬 var cH = 250;//畫(huà)布的高 var canvasStyle; //默認(rèn)樣式 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); //===========標(biāo)題 var tH = 30;//標(biāo)題的高 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軸網(wǎng)格 var lineX;//X軸網(wǎng)格線 var tagX;//x軸tag var lxB;//每個(gè)網(wǎng)格的下偏移量 var xB = 30;//下偏移量 var xL = 50;//左偏移量 var lxS = 'numx' in options ? options.numx :6;//網(wǎng)格的數(shù)量 var txW = 'xw' in options ? options.xw :20;//調(diào)節(jié)網(wǎng)格間隔基數(shù) var lxW = (cH-tH-tT-xB-20)/lxS;//網(wǎng)格間隔 var xW = cW-xL-5;//x軸的長(zhǎng)度 var showSize;//Y軸顯示的最大值 if('maxval' in options){ showSize = options.maxval; }else{//自動(dòng)判斷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軸上顯示的基數(shù) 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軸網(wǎng)格 var lineY;//Y軸網(wǎng)格線 var tagY;//Y軸tag var sizeY;//數(shù)據(jù)上顯示的數(shù)值 var sizeHref;//數(shù)值上的鏈接 var lyL;//每個(gè)網(wǎng)格的左偏移量 var yH = lxW*lxS;//y軸的高 var yL = 50;//左偏移量 var lyS = length;//網(wǎng)格數(shù)量 var lyW = (cW-xL-10)/lyS;//網(wǎng)格間隔 var tdW = 'dw' in options ?options.dw : 20;//調(diào)節(jié)數(shù)據(jù)寬度基數(shù) var dW = (lyW-tdW)>0 ? (lyW-tdW-10) : lyW-10;//數(shù)據(jù)寬度 var yB = xB;//y軸下偏移量 var dH;//數(shù)據(jù)的高度 var dC;//數(shù)據(jù)的顏色 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); } } //計(jì)算數(shù)據(jù)總值 $.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數(shù)據(jù)===============
header( 'Content-type: text/html;charset=utf-8' );//設(shè)置頁(yè)面編碼 //圖一 $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);
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
