Odrysowywanie / skalowanie wykresu Google przy zmianie rozmiaru okna

83

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

thecodeparadox
źródło
35
to naprawdę powinna być wbudowana funkcja interfejsu API wizualizacji!
Michiel Cornille

Odpowiedzi:

69

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);
});
Hemerson Varela
źródło
40

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;
Tiago Castro
źródło
25
Warto wspomnieć, że gdy pobierasz „dane” przez ajax, wywołanie żądania XHTTPRequest na KAŻDYM kroku zmiany rozmiaru okna może być nieco stresujące na twoim serwerze, myślę, że lepiej byłoby jakoś buforować wyniki żądania ajax i wykorzystaj te dane ponownie, ale Twoje rozwiązanie działa dla mnie! +1
Michiel Cornille
1
nie działał dla mnie, trzeba było usunąć stare rezultaty z div przed ponownym rysowaniem: $ ('# chart_div'). empty ();
Mantas D
3
window.onload = resize();jest odpowiednikiemresize(); window.onload = undefined;
Gustavo Rodrigues
Działa tak, jak to opisujesz podczas powiększania okna, ale jeśli zmniejszysz okno, musisz najpierw opróżnić div wykresu, jak wskazał Mantas D. $ ('# chart_div'). empty (); Umożliwi to przeglądarce zmniejszenie div przed ponownym narysowaniem wykresu.
Vincent
Podoba mi się to rozwiązanie. Nie lubię timerów ani funkcji rekurencyjnych po stronie klienta, po co konsekwentnie używać mocy procesora?
Roberto
8

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);
});
Fonsini
źródło
misspell "otions" -> "options"
Tomasz Majerski
4

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

Jamie Deakin
źródło
Doskonały ze względu na swoją prostotę.
MastaBaba
3

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 .

OO7
źródło
2

Przerysuj / przeskaluj rysunek linii Google przy zmianie rozmiaru okna:

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});
Srinu Basava
źródło
Jest to naprawdę nieefektywne, ponieważ wystarczy wywołać chart.draw (dane, opcje); jeszcze raz. Spowoduje to pobranie wszystkich informacji i wykonanie powtarzalnej i niepotrzebnej pracy.
Fonsini
jak wymusić przykład przerysowania po kliknięciu, zmuszamy do wywołania funkcji zmiany rozmiaru
MaXi32
1

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

Bwyan
źródło
0

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.

Ansh Shrivastava
źródło
-1

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

b0y
źródło