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

83

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

thecodeparadox
quelle
34
Dies sollte wirklich eine eingebaute Funktion der Visualisierungs-API sein!
Michiel Cornille

Antworten:

68

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);
});
Hemerson Varela
quelle
40

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;
Tiago Castro
quelle
25
Es könnte erwähnenswert sein, dass, wenn Sie "Daten" über Ajax abrufen, das Auslösen einer XHTTPRequest in JEDEM Fenster-Größenänderungsschritt auf Ihrem Server etwas stressig sein kann. Ich denke, es wäre besser, die Ergebnisse der Ajax-Anfrage und irgendwie zwischenzuspeichern Verwenden Sie diese Daten wieder, aber Ihre Lösung funktioniert für mich! +1
Michiel Cornille
1
funktionierte nicht für mich, musste alte Ergebnisse aus div löschen, bevor ich erneut zeichnete: $ ('# chart_div'). empty ();
Mantas D
3
window.onload = resize();ist gleichbedeutend mitresize(); window.onload = undefined;
Gustavo Rodrigues
Es funktioniert so, wie Sie es beschreiben, wenn Sie das Fenster vergrößern. Wenn Sie das Fenster jedoch verkleinern, müssen Sie zuerst das Diagramm div leeren, wie Mantas D hervorhob. $ ('# chart_div'). empty (); Dadurch kann der Browser das Div verkleinern, bevor das Diagramm neu gezeichnet wird.
Vincent
Ich mag diese Lösung. Ich mag keine Timer oder rekursiven Funktionen auf der Clientseite. Warum sollte ich die CPU-Leistung konsequent nutzen?
Roberto
7

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);
});
Fonsini
quelle
Rechtschreibfehler "otions" -> "options"
Tomasz Majerski
4

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

Jamie Deakin
quelle
Hervorragend für seine Einfachheit.
MastaBaba
3

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 .

OO7
quelle
2

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

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});
Srinu Basava
quelle
Dies ist wirklich ineffizient, da Sie nur chart.draw (Daten, Optionen) aufrufen müssen. nochmal. Dadurch werden alle Informationen abgerufen und wiederholte und unnötige Arbeiten ausgeführt.
Fonsini
Wie erzwinge ich das Neuzeichnen eines Beispiels beim Klicken? Wir erzwingen das Aufrufen der Größenänderungsfunktion.
MaXi32
1

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

Bwyan
quelle
0

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.

Ansh Shrivastava
quelle
-1

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

b0y
quelle