Question

• 采用谷歌图AAP,绘制一些线图,并把它放在像样的DIV:

<div class="chart" style="display:block">
  <img src="http://chart.apis.google.com/chart?chs=620x40&cht=lfi&chco=0077CC&&chm=B,E6F2FA,0,0,0&chls=1,0,0&chd=t:27,25,25,25,25,27,100,31,25,36,25,25,39,25,31,25,25,25,26,26,25,25,28,25,25,100,28,27,31,25,27,27,29,25,27,26,26,25,26,26,35,33,34,25,26,25,36,25,26,37,33,33,37,37,39,25,25,25,25">
</div>

我必须穿过所需的图象的高度和宽度,谷歌标的成像(chs=620x40)。我的图象与我的母体一样<代码>div。我需要计算一下这个图形的宽度和动态,以便我了解正确的大小。我如何能够这样做?

(I m not too bright with jQuery and I m trying to avoid using some bloated libraries)

Thanks

Answer 1

You can use the following JavaScript (with jQuery):

function sizeCharts(){
    $(".chart").each(function(){
        var w = $(this).width();
        var h = $(this).height(); // or just change this to var h = 40
        $("<img>").attr("src","http://chart.apis.google.com/chart?chs=" + 
            escape(w) + "x" + escape(h) + "&[etc]").appendTo(this);
    });
}
$(function(){
    sizeCharts();
    var shouldResize = true;
    $(window).bind("resize",function(){
        if(!shouldResize){
            return;
        }
        shouldResize = false;
        setTimeout(function(){
            sizeCharts();
            shouldResize = true;
        },1000);
    });
});

将[tc]改为你希望使用的其余部分。以上法典中发生的情况是,它将在你网页上通过<代码>chart类别的所有材料加以公布,并将图表适当尺寸。

如果你使用液态布局(即贵网站转播,以填补一定比例的屏幕),那么你也希望列入<代码>(功能(功能){......}) bit,该编码在网页重新布置时使用同样的代码。请注意,此处使用记时器,否则,每台玻璃将重新装上玻璃窗。

友情链接