it-swarm.com.ru

Перерисовка/масштабирование диаграммы Google при изменении размера окна

Как перерисовать/изменить масштаб линейной диаграммы Google при изменении размера окна?

70
thecodeparadox

Чтобы перерисовать только когда изменение размера окна завершено и избежать нескольких триггеров, я думаю, лучше создать событие:

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data);
});
54
Hemerson Varela

Оригинальный код от Google просто делает это в конце:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

Изменяя его с помощью небольшого JavaScript, вы можете масштабировать его при изменении размера окна:

function resize () {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

window.onload = resize;
window.onresize = resize;
35
Tiago Castro

Поскольку событие window.resize запускается несколько раз при каждом событии изменения размера, я считаю, что лучшим решением является использование smartresize.js и использование smartdraw(). Это ограничивает количество перерисовок диаграммы для window.resize.

Используя предоставленный js, вы можете сделать это так просто:

// Instantiate and draw our user charts, passing in some options (as you probably were doing it)
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);

// And then:
$(window).smartresize(function () {
    chart.draw(data, options);
});
7
Fonsini

Это самый простой способ сделать это, не создавая слишком большой нагрузки на сервер:

    var chart1 = "done";

$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});

Все, что он делает, это ждет 1 секунду перед перезагрузкой графика и не позволяет функции снова вызвать вызов в этот период ожидания. поскольку функции изменения размера окна вызываются несколько раз каждый раз, когда вы изменяете размер окна, это помогает заставить функцию фактически работать только один раз при каждом изменении размера окна, остальные вызовы останавливаются оператором if.

Надеюсь, это поможет

3
Jamie Deakin

В API визуализации Google нет возможности сделать Google Charts отзывчивыми.

Но мы можем сделать Google Charts отзывчивыми как Window Resizes. Чтобы сделать Google Chart отзывчивым, есть библиотека jQuery, доступная по адресу GitHub - jquery-smartresize , лицензированная по лицензии MIT, которая имеет возможность изменять размеры графиков при изменении размера окна.

Этот проект на GitHub имеет два файла сценария: -

jquery.debouncedresize.js: adds a special event that fires once after the window
has been resized.

&

jquery.throttledresize.js: adds a special event that fires at a reduced rate (no 
more double events from Chrome and Safari).

Вот два примера адаптивных графиков ...

  1. Отзывчивая круговая диаграмма Google
  2. Отзывчивая гистограмма Google

Мы можем изменить нижний отступ visualization_wrap, чтобы он соответствовал желаемому соотношению сторон диаграммы.

Calculate as Height / Width x 100
For a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25%
For a square it'd be 100%

Мы можем настроить параметр chartarea Google Chart , чтобы гарантировать, что метки не будут обрезаны при изменении размера.

3
OO7

Перерисовать/изменить масштаб линейной диаграммы Google при изменении размера окна:

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});
2
Srinu Basava

Я лично предпочитаю следующий подход, если вы можете жить с использованием addEventListener, и не против отсутствия поддержки IE <9.

var windowResizeTimer;
window.addEventListener('resize', function(e){
    clearTimeout(windowResizeTimer);
    windowResizeTimer = setTimeout(function(){
        chart.draw(data, options);
    }, 750);
});

Обратите внимание на использование функций setTimeout() и clearTimeout() и добавленную задержку в 750 миллисекунд, что делает это немного менее интенсивным, когда множественные события изменения размера запускаются в быстрой последовательности (что часто бывает в браузерах на рабочем столе при изменении размера с помощью мыши).

0
Bwyan