Odrysowywanie / skalowanie wykresu Google przy zmianie rozmiaru okna

Jak przerysować / przeskalować wykres linii Google przy zmianie rozmiaru okna?

Aby przerysować tylko po zakończeniu zmiany rozmiaru okna i uniknąć wielu wyzwalaczy, myślę, że lepiej jest utworzyć wydarzenie:

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

Oryginalny kod Google po prostu robi to na końcu:

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

Zmieniając go za pomocą małego javascript, możesz go skalować, gdy zmienia się rozmiar okna:

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

window.onload = resize;
window.onresize = resize;

Ponieważ window.resizezdarzenie jest uruchamiane wiele razy podczas każdego zdarzenia zmiany rozmiaru, uważam, że najlepszym rozwiązaniem jest użycie smartresize.js i użycie smartdraw(). Ogranicza to liczbę przerysowań wykresu na window.resize.

Korzystając z dostarczonego js, ​​możesz to zrobić tak prosto, jak to:

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

Oto najprostszy sposób, w jaki mogę to zrobić, nie powodując zbytniego obciążenia przeglądarki:

    var chart1 = "done";

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

Wszystko, co robi, to czekać 1 sekundę przed ponownym załadowaniem wykresu i nie pozwala funkcji na ponowne wywołanie w tym okresie oczekiwania. ponieważ funkcje zmiany rozmiaru okna są wywoływane wiele razy za każdym razem, gdy zmieniasz rozmiar okna, pomaga to sprawić, że funkcja będzie działać tylko raz, za każdym razem, gdy zmienisz rozmiar okna, pozostałe wywołania są zatrzymywane przez instrukcję if.

mam nadzieję, że to pomoże

W interfejsie Google Visualization API nie ma opcji, aby dostosować Google Charts.

Ale możemy sprawić, by Wykresy Google były responsywne przy zmianie rozmiaru okna . Aby wykres Google był responsywny, na GitHub dostępna jest biblioteka jQuery - jquery-smartresize na licencji MIT, która ma możliwość zmiany rozmiaru wykresów podczas zdarzenia zmiany rozmiaru okna.

Ten projekt na GitHub ma dwa pliki skryptów: -

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

Oto dwa przykłady responsywnych wykresów ...

1. Responsywny wykres kołowy Google
2. Elastyczny wykres słupkowy Google

Możemy zmienić dolne wypełnienie visualization_wrap, aby dopasować żądany współczynnik proporcji wykresu.

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%

Możemy dostosować chartarea opcji wykresu Google , aby zapewnić, że etykiety nie daj się odciąć na zmianę rozmiaru .

Przerysuj / przeskaluj rysunek linii Google przy zmianie rozmiaru okna:

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

Osobiście wolę następujące podejście, jeśli możesz żyć z użyciem addEventListener i nie przeszkadza mi brak wsparcia dla IE <9.

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

Zwróć uwagę na użycie setTimeout()i clearTimeout()funkcji oraz dodana opóźnienie 750 milisekund, co czyni to nieco mniej intensywny, gdy ogień wiele zdarzeń resize w krótkich odstępach czasu (co jest często w przypadku przeglądarek na pulpicie podczas zmiany rozmiaru za pomocą myszy).

Utknąłem w tym samym od kilku dni i odkryłem, że dodanie wydarzenia działa najlepiej.

window.addEventListener("resize", drawChart);

Po prostu dodaj tę linię po zadeklarowaniu swojej funkcji i będzie działać dobrze.

Zastąp drawChart nazwą swojej funkcji.

Korzystając z odpowiedzi Tiago Castro , zaimplementowałem wykres liniowy, aby pokazać demonstrację.

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