得到一個谷歌圖圖像填充DIV的寬度

Question

我使用谷歌的圖表API獲取一些折線圖，並把它放在這樣一個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> 

我必須通過高度和寬度所需的圖表圖像和Google Chart API呈現它chs=620x40。我希望圖表圖像是我父母的div。我需要計算寬度並動態構建此圖表URL，以便獲得合適大小的圖表圖像。我怎樣才能做到這一點？

（我不使用jQuery太亮，我儘量避免使用一些臃腫庫）

感謝

Answer 1

您可以使用下面的JavaScript（用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); 
    }); 
}); 

將[etc]替換爲您希望使用的其他網址。在上面的代碼中會發生什麼呢，它會遍歷頁面中chart類的所有內容，並將圖表放入適當的大小。

如果您使用液體佈局（即您的網站調整大小以填充屏幕的某個百分比），那麼您還需要包含$(function(){ ... })位，該位在調整頁面大小時運行相同的代碼。請注意此處使用計時器，否則將爲窗口調整大小的每個像素重新加載相同的圖表。