Google graphique redessiner / redimensionner avec redimensionner la fenêtre

Question

Comment redessiner / redimensionner un linechart Google lors du redimensionnement d'une fenêtre.

s'il vous plaît aider.

Merci

Answer 1

Pour redessiner uniquement lorsque le redimensionnement de la fenêtre est terminé et éviter plusieurs déclencheurs, il est préférable de créer un événement:

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

Answer 2

Le code original de Google fait simplement ceci à la fin:

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

En le modifiant avec un peu de javascript, vous pouvez le redimensionner lorsque Windows redimensionne:

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

    window.onload = resize();
    window.onresize = resize;
 

Answer 3

Étant donné que l'événement window.resize se déclenche plusieurs fois pour chaque événement de redimensionnement, j'estime que la meilleure solution consiste à utiliser debounce.js et à utiliser smartdraw (). Cela limite le nombre de mises à jour de graphiques par window.resize.

En utilisant le js fourni, vous pouvez le faire aussi simplement que ceci:

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

Answer 4

C'est le moyen le plus simple pour mon travail de le faire sans causer trop de stress pour le serveur:

    var chart1 = "done";

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

Tout ce qu'il fait, c'est d'attendre 1 seconde avant que le tableau de recharge et de ne pas laisser l'appel de la fonction de nouveau dans cette période d'attente. comme la fenêtre de redimensionner les fonctions sont appelées à plusieurs reprises chaque fois que vous modifiez la taille de la fenêtre cela contribue à rendre la fonction ne fait travailler une fois chaque fois que vous modifiez la taille de la fenêtre, le reste des appels arrêtée par l'instruction if.

J'espère que cette aide

Answer 5

Il n'y a pas d'option dans Google Visualisation API Google Charts réactif.

Mais nous pouvons faire de Google Charts sensible que la Fenêtre est Redimensionnée. Google Graphique responsive il y a la bibliothèque de jQuery disponible sur GitHub - jquery-smartresize concédée sous Licence MIT, qui a la possibilité de redimensionner les graphiques de la fenêtre de l'événement de redimensionnement.

Ce projet sur GitHub a deux fichiers de script :-

jquery.debouncedresize.js: adds a special event that fires once after the window
has been resized.

et

jquery.throttledresize.js: adds a special event that fires at a reduced rate (no 
more double events from Chrome and Safari).

Voici deux exemples de réactif graphiques...

1. Sensible Google Graphique À Secteurs
2. Sensible Google Graphique À Barres

Nous pouvons changer le remplissage en bas de visualization_wrap pour correspondre à l'aspect désiré rapport de graphique.

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%

Nous pouvons personnaliser chartarea option de Google Chart pour s'assurer que les étiquettes ne pas me couper du redimensionnement.