获取 Google Chart 图像来填充 DIV 的宽度

发布于 2024-12-26 06:48:38 字数 671 浏览 4 评论 0原文

我正在使用 Google 的 Chart 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 不太了解，我试图避免使用一些臃肿的库）

谢谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺渁∝ 2025-01-02 06:48:38

您可以使用以下 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] 替换为您要使用的其余 url。上面的代码中发生的情况是，它将迭代页面中包含 chart 类的所有内容，并将图表放入适当大小的图表中。

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

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.

回复收藏 0 原文

~没有更多了~