javascript - haxis - Google chart redraw/scale on window resize

google charts view window

Question

¿Cómo redibujo / reescalculo un diagrama de líneas de google en el tamaño de la ventana?

Answer 1

Como el evento window.resize se dispara varias veces en cada evento de redimensionamiento, creo que la mejor solución es usar smartresize.js y usar smartdraw() . Esto limita el número de redibujados de gráfico por window.resize .

Al usar el js provisto, puedes hacerlo tan simple como esto:

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

Answer 2

El código original de Google simplemente hace esto al final:

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

Cambiándolo con un pequeño javascript puedes escalarlo cuando la ventana cambia de tamaño:

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

window.onload = resize;
window.onresize = resize;

Answer 3

Esta es la forma más sencilla en que puedo solucionar este problema sin causar demasiada tensión al servidor:

    var chart1 = "done";

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

Todo lo que hace es esperar 1 segundo antes de volver a cargar el gráfico y no permite que la función vuelva a llamar en este período de espera. como las funciones de cambio de tamaño de la ventana se invocan varias veces cada vez que cambia el tamaño de la ventana, esto ayuda a que la función solo funcione una vez cada vez que cambia el tamaño de la ventana, el resto de las llamadas se detienen con la instrucción if.

espero que esto ayude

Answer 4

No hay ninguna opción en la API de visualización de Google para hacer que Google Charts responda.

Pero podemos hacer que Google Charts responda como Window Resizes . Para que Google Chart sea receptivo, hay una biblioteca de jQuery disponible en GitHub - jquery-smartresize bajo la licencia de MIT, que tiene la capacidad de cambiar el tamaño de los gráficos en el evento de cambio de tamaño de la ventana.

Este proyecto en GitHub tiene dos archivos 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).

Aquí hay dos ejemplos de gráficos receptivos ...

1. Gráfico de sectores de Google receptivo
2. Gráfico de barras de Google receptivo

Podemos cambiar el relleno inferior de visualization_wrap para que coincida con la relación de aspecto deseada del gráfico.

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%

Podemos personalizar la opción de chartarea de Google Chart para garantizar que las etiquetas no se corten al redimensionar .

Answer 5

Para volver a dibujar solo cuando se completa el cambio de tamaño de la ventana y evitar múltiples desencadenantes, creo que es mejor crear un evento:

//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 6

Personalmente prefiero el siguiente enfoque, si puedes vivir usando addEventListener, y no me importa la falta de soporte para IE <9.

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

Tenga en cuenta el uso de las setTimeout() y clearTimeout() y la demora agregada de 750 milisegundos, que lo hace ligeramente menos intensivo cuando se activan múltiples eventos de cambio de tamaño en sucesión rápida (que a menudo es el caso de los navegadores en el escritorio al redimensionar usando un mouse )

Answer 7

Redibujar / reescalar un gráfico de línea de Google en el tamaño de la ventana:

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

Answer 8

Utilizando la respuesta de Tiago Castro , he implementado un gráfico de líneas para mostrar la demostración.

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