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

Question

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

Answer 1

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

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

Answer 2

Оригинальный код от 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;

Answer 3

Поскольку событие 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);
});

Answer 4

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

    var chart1 = "done";

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

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

Я надеюсь, что это помогает

Answer 5

В 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 , чтобы гарантировать, что метки не будут обрезаны при изменении размера .

Answer 6

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

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

Answer 7

Используя ответ Тиаго Кастро , я реализовал график , чтобы показать демонстрацию.

google.load('visualization', '1', {
  packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Compute Time');
  data.addColumn('number', 'Compute Times');
  console.log("--");
  data.addRows([
    [0, 0, 0],
    [10, 10, 15],
    [20, 20, 65]
  ]);
  console.log(data);
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Nb Curves'
    },
    vAxis: {
      title: 'Time (ms)'
    },
    backgroundColor: '#f1f8e9'
  };

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

}

<script src='https://www.google.com/jsapi'></script>
<div id="chart_div">

Answer 8

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

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

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