集智平台jquery调整统计图缩放比例
需求描述：
做一个通用统计图报表报表展现与输出" target="_blank" class="geeznLink8">展现页面，统计图展现区域大小固定，能够根据报表生成的统计图大小进行统计图等比例缩放。使得大小不一的统计图都能够在指定框架内展现。
实现方式：
利用jQuery图片预加载插件，重置图片宽度及高度，可以自动适应图片的宽和高以适应指定的外部框架的宽高。
具体实现：
jQuery图片预加载插件介绍：
jquery.loadthumb.js
jQuery.fn.loadthumb = function(options) {
options = $.extend({
src : “”,
imgId : “myImgs”,
parentId : “CRviewer”
},options);
var _self = this;
_self.hide();
var img = new Image();
$(img).load(function(){
imgDem = {};
imgDem.w = img.width;
imgDem.h = img.height;
imgDem = $.imgResize({“w”: $(“#”+options.parentId).width() ,”h”: $(“#”+options.parentId).height()},{“w”:imgDem.w,”h”:imgDem.h});
var imgMargins = $.imgCenter({“w”: $(“#”+options.parentId).width() ,”h”: $(“#”+options.parentId).height()},{“w”:imgDem.w,”h”:imgDem.h});
$(“#”+options.imgId).css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t});
_self.attr(“src”, options.src);
_self.fadeIn(“slow”);
}).attr(“src”, options.src); //.atte(“src”,options.src)要放在load后面，
return _self;
}
//重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
jQuery.imgResize = function(parentDem,imgDem){
if(imgDem.w>0 && imgDem.h>0){
var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
//如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
//如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
imgDem.h = imgDem.h*rate;
}
return imgDem;
}
//使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
jQuery.imgCenter = function(parentDem,imgDem){
var left = (parentDem.w – imgDem.w)*0.5;
var top = (parentDem.h – imgDem.h)*0.5;
return { “l”: left , “t”: top};
}
统计图展现页面(showChart.jsp)部分代码：
<html>
<!—引入相关的css文件和jquery及插件文件–>
<link rel=”stylesheet” type=”text/css” href=”cr.css” />
<script src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js” type=”text/javascript” language=”javascript” charset=”utf-8″></script>
<script src=”jquery.loadthumb.js” type=”text/javascript” language=”javascript” charset=”utf-8″></script>
<script type=”text/javascript”>
$(document).ready(function(){
//获得报表中的img对象调用showImg()方法进行图片加载和等比例缩放
var $img=$(“#report1″).find(“img”);
showImg($img.attr(“src”));
});
function showImg(src) {
var $img = $(“#myImgs”);
$img.loadthumb({
“imgId”:”myImgs”,
“src”: src,
“parentId”:”CRviewer”
});
}
</script>
<!—CRviewer是统计图展现的父元素（外部框架），myimgs是图片对象用于加载统计图结果–>
<div class=”CRviewer” id=”CRviewer”>
<img src=”" id=”myImgs”/>
</div>
……
<!–调用tag标签进行报表运算和统计图展现–>
<report:html name=”report1″ reportFileName=”<%=report%>”
funcBarLocation=”top”
exceptionPage=”/reportJsp/myError2.jsp”
appletJarName=”runqianReport4Applet.jar,dmGraphApplet.jar”
/>