Получить изображение диаграммы Google, чтобы заполнить ширину DIV

Question

Я выборки некоторых линейных диаграмм с помощью Chart API Google и поместить его в 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> 

я должен пройти высоту и ширину требуемого изображения диаграммы, и API Google Chart отображает его, например 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); 
    }); 
}); 

Замените [и т. Д.] На остальную часть URL-адреса, которую вы хотите использовать. Что происходит в приведенном выше коде, он будет перебирать все с помощью класса chart на вашей странице и помещает в него диаграмму с соответствующим размером.

Если вы используете жидкую компоновку (т. Е. Ваш сайт изменяет размер, чтобы заполнить определенный процент экрана), то вы также захотите включить бит $(function(){ ... }), который выполняет тот же код при изменении размера страницы. Обратите внимание на использование таймеров здесь, иначе один и тот же график будет перезагружен для каждого пикселя, который изменит размер окна.