我正在使用 Google 的图表 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 不太了解,我尽量避免使用一些臃肿的库)
谢谢
最佳答案
您可以使用以下 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(){ ... })
位,它在调整页面大小时运行相同的代码。请注意此处使用的计时器,否则将为调整窗口大小的每个像素重新加载相同的图表。
关于html - 获取 Google Chart 图片以填充 DIV 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8835742/