wake-up-neo.net

Neuzeichnen/Skalieren von Google-Diagrammen

Wie kann ich ein Google-Liniendiagramm mit der Fenstergröße neu zeichnen/skalieren?

70
thecodeparadox

Um erst nach Abschluss der Fenstergröße neu zu zeichnen und mehrere Auslöser zu vermeiden, ist es meiner Meinung nach 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);
});
54
Hemerson Varela

Der Originalcode von Google macht dies am Ende einfach:

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

Wenn Sie es mit einem kleinen Javascript ändern, können Sie es skalieren, wenn das Fenster seine Größe ändert:

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

window.onload = resize;
window.onresize = resize;
35
Tiago Castro

Da das window.resize-Ereignis bei jedem Größenänderungsereignis mehrfach ausgelöst wird, halte ich die beste Lösung für die Verwendung von smartresize.js und smartdraw(). Dies begrenzt die Anzahl der Diagrammänderungen pro window.resize.

Mit den mitgelieferten 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);
});
7
Fonsini

Dies ist die einfachste Möglichkeit, dies zu erreichen, ohne den Server zu stark zu belasten:

    var chart1 = "done";

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

Sie müssen lediglich 1 Sekunde warten, bevor der Chart neu geladen wird, und die Funktion in dieser Wartezeit nicht erneut aufrufen. Da Fenstergrößenänderungsfunktionen bei jeder Änderung der Fenstergröße mehrmals aufgerufen werden, kann die Funktion nur bei jeder Änderung der Fenstergröße einmalig funktionieren. Die übrigen Aufrufe werden von der if -Anweisung angehalten.

Ich hoffe das hilft

3
Jamie Deakin

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

Aber wir können Google Charts mit Window-Size-Größen ansprechen. Um Google Chart ansprechbar zu machen, gibt es eine jQuery-Bibliothek unter GitHub - jquery-smartresize , die unter der Lizenz MIT lizenziert ist und die Größe von Diagrammen bei Fenstergrößenänderungsereignissen ändern kann.

Dieses Projekt auf GitHub enthält 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 responsive Diagramme ...

  1. Responsives Google-Kreisdiagramm
  2. Responsives Google Balkendiagramm

Wir können den unteren Abstand von visualization_wrap an das gewünschte Seitenverhältnis des Diagramms anpassen.

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 Option chartarea von Google Chart anpassen, um sicherzustellen, dass Etiketten bei der Größenänderung von nicht abgeschnitten werden.

3
OO7

Google-Liniendiagramm bei Fenstergrößenänderung neu zeichnen/skalieren:

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

Ich persönlich bevorzuge den folgenden Ansatz, wenn Sie mit addEventListener leben können und die 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 Funktionen setTimeout() und clearTimeout() und die hinzugefügte Verzögerung von 750 Millisekunden. Dies ist etwas weniger intensiv, wenn mehrere Größenänderungsereignisse kurz nacheinander ausgelöst werden (was bei Browsern auf dem Desktop häufig der Fall ist, wenn Sie die Größe der Maus mit der Maus ändern).

0
Bwyan