best practice per Google Charts reattivo

Question

Ho questo google chart on a my website. È una tabella di dispersione per ora, ma mi piacerebbe la soluzione per tutti i tipi di grafici. Se ad esempio si carica il sito con una finestra di 700 px, le dimensioni del grafico non sono reattive: il grafico è troppo ampio. Di seguito è riportato il codice che sto utilizzando.

Potete aiutarmi?

Grazie

HTML:

<div id="chart_div"></div> 

CSS:

#chart_div { 
    width:100%; 
    height:20%; 
} 

JS:

var options = { 
     title: 'Weight of pro surfer vs. Volume of his pro model', 
     hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55 
     vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40}, //20 
     legend: 'none', 
      width: '100%', 
      height: '100%', 
      colors: ['#000000'], 
      series: { 
        1: { color: '#06b4c8' }, 
       }, 
     legend: {position: 'top right', textStyle: {fontSize: 8}}, 
     chartArea: {width: '60%'}, 
      trendlines: { 0: {//type: 'exponential', 
        visibleInLegend: true, 
        color: 'grey', 
        lineWidth: 2, 
        opacity: 0.2, 
        labelInLegend: 'Linear trendline\n(Performance)' 
        } 
       } // Draw a trendline for data series 0. 
    }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));   
    chart.draw(data, options); 
    google.visualization.events.addListener(chart, 'ready', myReadyHandler()); 

    function myReadyHandler() { 
     chartDrawn.resolve();  } 

Edit: Sembra che il div #chart_div ha la giusta dimensione (il uno che io s et con i CSS), ma il grafico all'interno di questo div non si adegua la sua dimensione ... che rimanga bloccato con Vedere l'immagine:

Answer 1

Dal momento che l'API di visualizzazione grafici non sono sensibili a tutti, si deve gestire tutto da solo. Tipicamente, questo significa ascoltare per la finestra "ridimensionare" l'evento e ridisegnare il grafico allora (impostando qualsiasi dimensione a seconda dei casi):

function resize() { 
    // change dimensions if necessary 
    chart.draw(data, options); 
} 
if (window.addEventListener) { 
    window.addEventListener('resize', resize); 
} 
else { 
    window.attachEvent('onresize', resize); 
} 

Answer 2

ho trovato questo codice penna esempio utile: Code pen example of Google Charts Responsive Fanno ridisegnare il grafico sulla finestra ridimensionare utilizzando jQuery:

$(window).resize(function(){ 
    yourCartdrawChartfuntion(); 
}); 

Answer 3

Per reattivo sul carico funziona:

#chart_div { 
width:inherit; 
height:inherit; 
} 

Benche doesnt funziona quando la dimensione dello schermo cambia durante la sessione.

Answer 4

put larghezza 100% del grafico e chiamare la funzione di ridimensionamento come sotto

$(window).resize(function(){ 
    yourCallingChartFunction(); 
}); 

Answer 5

Un frammento più efficiente ridimensionamento è inferiore e riutilizzabile;

//bind a resizing function to the window 
$(window).resize(function() { 
    if(this.resizeTO) clearTimeout(this.resizeTO); 
    this.resizeTO = setTimeout(function() { 
     $(this).trigger('resizeEnd'); 
}, 500); 
}); 
//usage of resizeEnd 

$(window).bind('resizeEnd', function() { 
    DoSomething(); 
}); 

Answer 6

Per me, nessuno dei precedenti ha funzionato o erano troppo complessi per me per fare un tentativo.

La soluzione che ho trovato è semplice e funziona perfettamente. Si tratta solo della creazione di un normale grafico di Google, nel mio caso di un grafico ad anello e poi di uno stile usando CSS.

@media screen and (max-width: 1080px) { 
    div#donutchart { 
     zoom:0.6; 
     margin-left:-16%; 
    } 
} 

Questo è tutto. Naturalmente puoi impostare altri valori per larghezza massima, zoom e margini per far sì che il tuo grafico si adatti perfettamente. Il mio grafico è 800x600 (you can see it here).

Answer 7

Se si utilizza Twitter Bootstrap, poiché v3.2 È possibile sfruttare gli stili embed-responsive:

<div class="embed-responsive embed-responsive-16by9"> 
    <div id="chart_div" class="embed-responsive-item"></div> 
</div> 

Oppure, se volete 4: 3 aspect ratio:

<div class="embed-responsive embed-responsive-4by3"> 
    <div id="chart_div" class="embed-responsive-item"></div> 
</div>