web-dev-qa-db-fra.com

Google graphique redessiner/redimensionner la fenêtre redimensionner

Comment redessiner/redimensionner un linechart google lors du redimensionnement d'une fenêtre?

javascriptjqueryresizegoogle-visualization
70
thecodeparadox

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

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 la fenêtre est redimensionnée:

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

Étant donné que l'événement window.resize se déclenche plusieurs fois pour chaque événement de redimensionnement, la meilleure solution consiste à utiliser smartresize.js et à utiliser smartdraw(). Cela limite le nombre de mises à jour du graphique 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, options);
});
7
Fonsini

C’est le moyen le plus simple de résoudre ce problème sans 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 est d’attendre 1 seconde avant que le diagramme ne se recharge et ne permet pas à la fonction d’appeler à nouveau pendant cette période d’attente. comme les fonctions de redimensionnement de fenêtre sont appelées plusieurs fois chaque fois que vous modifiez la taille de la fenêtre, cela permet de faire en sorte que la fonction ne soit réellement opérationnelle qu'une fois à chaque modification de la taille de la fenêtre.

J'espère que ça aide

3
Jamie Deakin

L'API de visualisation Google ne permet pas de rendre Google Charts responsive.

Mais nous pouvons rendre Google Charts réactif en redimensionnant la fenêtre}. Pour rendre Google Chart réactif, une bibliothèque jQuery est disponible sur GitHub - jquery-smartresize licencié sous la licence MIT, qui permet de redimensionner les graphiques en cas de redimensionnement de fenêtre.

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 graphiques réactifs...

  1. Graphique à secteurs Google réactif
  2. Graphique à barres Google réactif

Nous pouvons modifier le remplissage inférieur de visualization_wrap pour qu'il corresponde au rapport d'aspect souhaité du 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 l’option chartarea de Google Chart afin que les libellés ne soient pas tronqués lors du redimensionnement.

3
OO7

Redessiner/redimensionner un linechart Google sur le redimensionnement de fenêtre

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

Personnellement, je préfère l’approche suivante, si vous pouvez vivre avec l’utilisation de addEventListener, et le manque de prise en charge de IE <9.

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

Notez l'utilisation des fonctions setTimeout() et clearTimeout() et le délai supplémentaire de 750 millisecondes, ce qui le rend légèrement moins intensif lorsque plusieurs événements de redimensionnement se déclenchent rapidement (ce qui est souvent le cas pour les navigateurs sur le bureau lors du redimensionnement à l'aide d'une souris).

0
Bwyan