Ridimensionamento/ridimensionamento del grafico di Google sul ridimensionamento della finestra

Question

Come si ridisegna/ridimensiona un diagramma di google sul ridimensionamento della finestra?

Answer 1

Per ridisegnare solo quando la finestra di ridimensionamento è completata ed evitare più trigger, penso che sia meglio creare un evento:

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

Answer 2

Il codice originale di Google fa semplicemente questo alla fine:

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

Cambiare con un po 'di javascript è possibile scalare quando ridimensiona la finestra:

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

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

Answer 3

Ridisegna/ridimensionare un Google linechart sulla ridimensionamento della finestra:

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

Answer 4

Poiché l'evento window.resize si accende m più volte su ogni evento di ridimensionamento, credo che la soluzione migliore sia usare smartresize.js e usare smartdraw(). Ciò limita il numero di ridisegni del grafico per window.resize.

Utilizzando i js fornite si può fare nel modo più semplice questo:

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

Answer 5

Questo è il modo più semplice che posso lavorare fuori di fare questo senza provocare troppo stress al server:

var chart1 = "done"; 

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

Tutto ciò che fa è attendere un secondo prima che il grafico si ricarichi e non consente alla funzione di richiamare nuovamente in questo periodo di attesa. quando le funzioni di ridimensionamento della finestra vengono richiamate più volte ogni volta che si modifica la dimensione della finestra, questo aiuta a far funzionare la funzione solo una volta ogni volta che si modifica la dimensione della finestra, il resto delle chiamate viene interrotto dall'istruzione if.

Spero che questo aiuta

Answer 6

Non esiste alcuna opzione in Google API di visualizzazione di rendere Google Charts reattivo.

Ma possiamo rendere Google Charts reattivo come Ridimensiona finestra. Per rendere reattivo Google Chart, è disponibile la libreria jQuery su GitHub - jquery-smartresize con licenza MIT, che ha la possibilità di ridimensionare i grafici sull'evento di ridimensionamento della finestra.

Questo progetto su GitHub ha due file di 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). 

Ecco due esempi di classifiche reattivo ...

1. Responsive Google Pie Chart
2. Responsive Google Bar Chart

possiamo cambiare il padding inferiore di visualization_wrap per abbinare le proporzioni desiderate di grafico.

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% 

Possiamo personalizzare ChartArea possibilità di Google Grafico al fine di garantire che le etichette non vengono tagliate sul ridimensionamento.

Answer 7

Io personalmente preferisco il seguente approccio, se si può vivere con l'utilizzo di addEventListener, e non vi dispiace la mancanza di supporto per IE < 9.

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

Si noti l'uso dei setTimeout() e clearTimeout() funzioni e la ha aggiunto un ritardo di 750 millisecondi, il che rende questo un po 'meno intenso quando più eventi di ridimensionamento si attivano in rapida successione (che è spesso il caso per i browser sul desktop quando si ridimensiona usando un mouse).

Answer 8

Utilizzo di Risposta di Tiago Castro, Ho implementato un grafico a linee per mostrare la dimostrazione.

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