Jak przerysować / przeskalować wykres linii Google przy zmianie rozmiaru okna?
javascript
jquery
resize
google-visualization
thecodeparadox
źródło
źródło
Odpowiedzi:
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); });
źródło
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;
źródło
window.onload = resize();
jest odpowiednikiemresize(); window.onload = undefined;
Ponieważ
window.resize
zdarzenie jest uruchamiane wiele razy podczas każdego zdarzenia zmiany rozmiaru, uważam, że najlepszym rozwiązaniem jest użycie smartresize.js i użyciesmartdraw()
. Ogranicza to liczbę przerysowań wykresu nawindow.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); });
źródło
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
źródło
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 ...
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 .
źródło
Przerysuj / przeskaluj rysunek linii Google przy zmianie rozmiaru okna:
$(document).ready(function () { $(window).resize(function(){ drawChart(); }); });
źródło
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()
iclearTimeout()
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).źródło
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.
źródło
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">
źródło