Best Practice für responsive Google Charts

Question

Ich habe diese google chart on a my website. Es ist ein Streudiagramm für jetzt, aber ich möchte die Lösung für alle Arten von Diagrammen. Wenn Sie beispielsweise die Site mit einem 700-px-weiten Fenster laden, reagieren die Diagrammdimensionen nicht: Das Diagramm ist zu breit. Unten ist der Code, den ich verwende.

Können Sie mir helfen?

Dank

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: Es scheint, dass die div #chart_div die richtige Größe hat (die eine, die ich s et mit CSS), aber die Grafik in diesem div seine Größe nicht anpassen ... es bleibt gesperrt mit Siehe das Bild:

Answer 1

Seit der Visualization API-Charts überhaupt nicht reagieren, müssen Sie behandeln alles auf eigene Faust. Normalerweise bedeutet dies, „die Größe“ Ereignis für das Fenster zu hören und das Diagramm neu zu zeichnen dann (alle Dimensionen als geeignete Einstellung): Code pen example of Google Charts Responsive tun Sie das Diagramm auf Fenster neu zu zeichnen:

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

Answer 2

ich diesen Code Stift Beispiel nützlich gefunden mit jQuery die Größe:

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

Answer 3

Für ansprechbar auf Last arbeitet:

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

Altough es dosen't arbeiten, wenn sich die Bildschirmgröße während der Sitzung ändert.

Answer 4

put Breite 100% des Diagramms und rufen die Funktion, wie unten Resize

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

Answer 5

Ein effizienteres Ändern der Größe Schnipsel ist unterhalb und wiederverwendbar ist;

Answer 6

Für mich funktionierte keiner der oben genannten oder sie waren zu komplex für mich, es zu versuchen.

Die Lösung, die ich gefunden habe, ist einfach und funktioniert perfekt. Es geht darum, ein normales Google-Diagramm zu erstellen, in meinem Fall ein Donut-Diagramm, und es dann mit CSS zu formatieren.

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

Das ist alles. Natürlich können Sie auch andere Werte für maximale Breite, Zoom und Ränder festlegen, damit Ihr Diagramm perfekt passt. Mein Diagramm ist 800x600 (you can see it here).

Answer 7

Wenn Sie Twitter Bootstrap verwenden, seit v3.2 Sie können nutzen die embed-responsive Stile:

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

Oder wenn Sie 4: 3-Seitenverhältnis:

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