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

Ответ 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);
});

Ответ 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;

Ответ 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);
});

Ответ 4

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

    var chart1 = "done";

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

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

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

Ответ 5

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

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

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

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).

Вот два примера гибких диаграмм...

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

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