Google Diagramm neu zeichnen / skalieren bei Fenstergröße ändern

Wie zeichne / skaliere ich ein Google-Liniendiagramm beim Ändern der Fenstergröße neu?

Um nur nach Abschluss der Fenstergrößenänderung neu zu zeichnen und mehrere Auslöser zu vermeiden, ist es meines Erachtens besser, ein Ereignis zu erstellen:

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

Der Originalcode von Google macht dies einfach am Ende:

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

Wenn Sie es mit etwas Javascript ändern, können Sie es skalieren, wenn die Größe des Fensters geändert wird:

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

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

Da das window.resizeEreignis bei jedem Größenänderungsereignis mehrmals ausgelöst wird, ist es meiner Meinung nach die beste Lösung, smartresize.js zu verwenden und zu verwenden smartdraw(). Dies begrenzt die Anzahl der Neuzeichnungen von Diagrammen pro window.resize.

Mit den bereitgestellten js können Sie dies so einfach tun:

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

Dies ist der einfachste Weg, dies zu tun, ohne den Browser zu stark zu belasten:

    var chart1 = "done";

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

Warten Sie lediglich 1 Sekunde, bevor das Diagramm neu geladen wird, und lassen Sie die Funktion in dieser Wartezeit nicht erneut aufrufen. Da Fenstergrößenänderungsfunktionen bei jeder Änderung der Fenstergröße mehrmals aufgerufen werden, funktioniert die Funktion nur einmal, wenn Sie die Fenstergröße ändern. Der Rest der Aufrufe wird durch die if-Anweisung gestoppt.

ich hoffe das hilft

In der Google Visualization API gibt es keine Option, um Google Charts ansprechbar zu machen.

Aber wir können Google Charts reagieren , wie Fensters ändert machen . Um Google Chart reaktionsfähig zu machen, steht bei GitHub eine jQuery-Bibliothek zur Verfügung - jquery-smartresize, lizenziert unter MIT-Lizenz, mit der die Größe von Diagrammen bei Fenstergrößenänderungsereignissen geändert werden kann.

Dieses Projekt auf GitHub hat zwei Skriptdateien: -

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

Hier sind zwei Beispiele für reaktionsfähige Diagramme ...

1. Reaktionsschnelles Google-Kreisdiagramm
2. Reaktionsschnelles Google-Balkendiagramm

Wir können den unteren Abstand von visualization_wrap ändern, um ihn an das gewünschte Seitenverhältnis des Diagramms anzupassen.

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%

Wir können die Diagrammbereichsoption von Google Chart anpassen, um sicherzustellen, dass Etiketten beim Ändern der Größe nicht abgeschnitten werden .

Zeichnen / Skalieren Sie ein Google-Liniendiagramm in der Fenstergröße neu:

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

Ich persönlich bevorzuge den folgenden Ansatz, wenn Sie mit addEventListener leben können und die mangelnde Unterstützung für IE <9 nichts ausmacht.

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

Beachten Sie die Verwendung der setTimeout()und clearTimeout()Funktionen und die zusätzliche Verzögerung von 750 Millisekunden, die das macht etwas weniger intensiv , wenn mehrere Resize Ereignisse Feuer in schnellen Folge (die für Browser auf dem Desktop oft der Fall ist , wenn mit einer Maus Größe ändern).

Ich bin seit Tagen auf dem gleichen Weg und habe herausgefunden, dass das Hinzufügen eines Ereignisses am besten funktioniert.

window.addEventListener("resize", drawChart);

Fügen Sie einfach diese Zeile hinzu, nachdem Sie Ihre Funktion deklariert haben, und es wird gut funktionieren.

Ersetzen Sie drawChart durch den Namen Ihrer Funktion.

Mit der Antwort von Tiago Castro habe ich ein Liniendiagramm implementiert , um die Demonstration zu zeigen.

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