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

Я получаю несколько линейных диаграмм с помощью 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 и стараюсь избегать использования раздутых библиотек)

Спасибо


html google-visualization
person Mridang Agarwalla    schedule 12.01.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать следующий 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(){ ... }), который запускает тот же код при изменении размера страницы. Обратите внимание на использование таймеров, в противном случае та же диаграмма будет перезагружена для каждого пикселя, в котором изменяется размер окна.

person kirb    schedule 12.01.2012