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

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

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

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

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

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

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

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

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