获取Google Chart图像以填充DIV的宽度 [英] Get a Google Chart image to fill the width of a DIV

问题描述

我使用Google的Chart API获取一些折线图并将其放置在DIV中，如下所示：

 < div class =chartstyle =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）：

$ b

function sizeCharts（）{
$（。chart）。each（function（）{
var w = $（this）.width（）;
var h = $（this）.height（）; //或者将其改为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]替换为您希望使用的其他网址。在上面的代码中会发生什么呢，它会遍历页面中的图表类的所有内容，并将图表放入适当的大小。

如果您使用液体布局（即您的网站调整大小以填充屏幕的某个百分比），那么您还需要包含 $（function（）{...}）位，它在页面大小调整时运行相同的代码。请注意这里使用计时器，否则相同的图表将重新加载窗口调整大小的每个像素。

I'm fetching some line charts using Google's Chart API and placing it in a DIV like this:

<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>

I have to pass the height and width of the chart image required and the Google Chart API renders it e.g. chs=620x40. I'd like the chart image to be the with of my parent div. I need to calculate the width and dynamically construct this chart URL so that I get a chart image of the right size. How can I do this?

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

Thanks

解决方案

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);
    });
});

Replace [etc] with the rest of the url you wish to use. What happens in the above code is it will iterate through everything with the chart class in your page and puts the chart into it with the appropriate size.

If you use a liquid layout (i.e. your site resizes to fill a certain percentage of the screen), then you will also want to include the $(function(){ ... }) bit, which runs the same code when the page is resized. Note the use of timers here, otherwise the same chart will be reloaded for every pixel that the window is resized.

这篇关于获取Google Chart图像以填充DIV的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！