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

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

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

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

Исходный код 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;

Поскольку 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);
});

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

    var chart1 = "done";

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

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

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

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

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

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

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

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

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

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

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

Я несколько дней зацикливался на одном и том же и обнаружил, что добавление события работает лучше всего.

window.addEventListener("resize", drawChart);

Просто добавьте эту строку после объявления вашей функции, и она будет работать нормально.

Замените drawChart именем вашей функции.

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

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">