Google chart redessiner/échelle de la fenêtre de redimensionnement

Comment redessiner/redimensionner google sur un graphique en courbes sur la fenêtre de redimensionnement?

  • ce doit vraiment être un construit en fonction de la visualisation de l'api!
InformationsquelleAutor thecodeparadox | 2012-01-21
  1. 61

    Pour redessiner uniquement lorsque la fenêtre de redimensionnement est terminé et éviter les déclencheurs multiples, je pense que c'est mieux 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);
});
    InformationsquelleAutor Hemerson Varela
  2. 36

    Le code d'origine par Google tout simplement est-ce à la fin:

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

    De le changer avec un peu de javascript, vous pouvez mettre à l'échelle 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;
    • Il pourrait être utile de mentionner que lorsque vous chercher des "données" sur l'ajax , le déclenchement d'une XHTTPRequest sur CHAQUE fenêtre de redimensionnement " pas " peut-être un peu stressfull sur votre serveur, je pense qu'il serait mieux de faire en quelque sorte de mettre en cache les résultats de la requête ajax et de réutiliser les données, mais votre solution fonctionne pour moi! +1
    • pas de travail pour moi, nécessaires pour supprimer les anciens rezults de div avant de tirer de nouveau: $('#chart_div').empty();
    • window.onload = resize(); est équivalent à resize(); window.onload = undefined;
    • Il fonctionne comme vous le décrire lors de la prise de la fenêtre plus grande, mais si vous réduisez la fenêtre, vous devez d'abord vider le graphique div, comme les raies Manta D a souligné. $('#chart_div').empty(); Cela va permettre au navigateur de réduire la div, avant de redessiner la carte.
    • J'aime bien cette solution. Je n'aime pas les minuteries ou des fonctions récursives sur le côté client, pourquoi toujours utiliser la puissance du CPU?
    • Commentaires complètement à côté de la question, si vous me demandez. Il n'y a pas moyen de re-rendu du graphique sans re-passage data? Les données n'ont pas changé la taille de la fenêtre n'.

    InformationsquelleAutor Tiago Castro
  3. 7

    Depuis le window.resize événement se déclenche plusieurs fois sur chaque événement de redimensionnement, je crois que la meilleure solution est d'utiliser smartresize.js et l'utilisation smartdraw(). Cela limite le nombre de tableau de redessiner par window.resize.

    En utilisant le js vous pouvez le faire simplement comme 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);
});
    • orthographié "otions" -> "options"
    InformationsquelleAutor Fonsini
  4. 4

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

        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

    • Excellent pour sa simplicité.
    InformationsquelleAutor Jamie Deakin
  5. 3

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

    Mais nous pouvons faire de Google Charts sensible Fenêtre se Redimensionne. Google Graphique responsive il y a la bibliothèque de jQuery disponible à 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.

    &

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

    InformationsquelleAutor OO7
  6. 2

    Redessiner/redimensionner Google sur un graphique en courbes sur la fenêtre de redimensionnement:

    $(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});
    • C'est vraiment inefficace puisque vous avez juste à appeler graphique.tirage(données, options); nouveau. Cela permettra de récupérer toutes les informations et de faire des répétitif et le travail inutile.
    • comment faire pour forcer redessiner exemple sur clic, nous force à appeler la fonction de redimensionnement.
    InformationsquelleAutor Srinu Basava
  7. 1

    Personnellement, je préfère l'approche suivante, si Vous pouvez vivre avec l'aide de la méthode addEventListener, et n'a pas l'esprit d'un manque de soutien pour IE < 9.

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

    Notez l'utilisation de la setTimeout() et clearTimeout() fonctions et de la valeur ajoutée retard de 750 millisecondes, ce qui le rend légèrement moins intense lorsque plusieurs événements de redimensionnement feu en succession rapide (ce qui est souvent le cas pour les navigateurs de bureau, lors d'un redimensionnement à l'aide d'une souris).

    InformationsquelleAutor Bwyan
  8. -1

    À l'aide de Tiago Castro réponse, j'ai mis en place un ligne graphique pour afficher la démonstration.

    JS:

    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;

}

    HTML:

    <script src='https://www.google.com/jsapi'></script>
<div id="chart_div">

    InformationsquelleAutor b0y