Redibujar / escalar el gráfico de Google al cambiar el tamaño de la ventana

83

¿Cómo redibujo / cambio la escala de un gráfico de líneas de Google al cambiar el tamaño de la ventana?

thecodeparadox
fuente
34
¡esto realmente debería ser una característica incorporada de la API de visualización!
Michiel Cornille

Respuestas:

68

Para volver a dibujar solo cuando se completa el cambio de tamaño de la ventana y evitar múltiples disparadores, 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);
});
Hemerson Varela
fuente
40

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 poco de javascript, puede 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;
Tiago Castro
fuente
25
Vale la pena mencionar que cuando obtiene "datos" a través de ajax, activar una XHTTPRequest en CADA 'paso' de cambio de tamaño de ventana puede ser un poco estresante en su servidor, creo que sería mejor almacenar en caché los resultados de la solicitud ajax y reutilice esos datos, ¡pero su solución funciona para mí! +1
Michiel Cornille
1
no funcionaba para mí, necesitaba eliminar los resultados antiguos de div antes de volver a dibujar: $ ('# chart_div'). empty ();
Mantas D
3
window.onload = resize();es equivalente aresize(); window.onload = undefined;
Gustavo Rodrigues
Funciona como lo describe al agrandar la ventana, pero si reduce la ventana, primero debe vaciar el div del gráfico, como señaló Mantas D. $ ('# chart_div'). empty (); Esto permitirá que el navegador reduzca el div antes de volver a dibujar el gráfico.
Vincent
Me gusta esta solucion No me gustan los temporizadores o las funciones recursivas del lado del cliente, ¿por qué usar constantemente la potencia de la CPU?
Roberto
8

Dado que el window.resizeevento se activa varias veces en cada evento de cambio de tamaño, creo que la mejor solución es usar smartresize.js y usar smartdraw(). Esto limita el número de redibujados de gráficos por window.resize.

Al usar los js proporcionados, puede hacerlo de la siguiente manera:

// 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);
});
Fonsini
fuente
escribe mal "otions" -> "options"
Tomasz Majerski
4

Esta es la forma más sencilla en la que puedo solucionarlo sin causar demasiado estrés al navegador:

    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 que se recargue 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 llaman 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

Jamie Deakin
fuente
Excelente por su sencillez.
MastaBaba
3

No hay ninguna opción en la API de visualización de Google para hacer que los gráficos de Google sean receptivos.

Pero podemos hacer que los gráficos de Google respondan a los cambios de tamaño de las ventanas . Para que Google Chart responda, hay una biblioteca jQuery disponible en GitHub: jquery-smartresize con licencia MIT License, 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.

Y

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 circular de Google receptivo
  2. Gráfico de barras receptivo de Google

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 ChartArea opción de gráficos de Google para asegurarse de que las etiquetas no queden cortados al redimensionar .

OO7
fuente
2

Redibujar / cambiar la escala de un gráfico de líneas de Google al cambiar el tamaño de la ventana:

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});
Srinu Basava
fuente
Esto es realmente ineficiente ya que solo tiene que llamar a chart.draw (datos, opciones); de nuevo. Esto buscará toda la información y hará un trabajo repetitivo e innecesario.
Fonsini
cómo forzar el rediseño del ejemplo al hacer clic, forzamos a llamar a la función de cambio de tamaño.
MaXi32
1

Personalmente, prefiero el siguiente enfoque, si puede vivir con el uso de addEventListener y no le 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);
});

Observe el uso de la setTimeout()y clearTimeout()las funciones y el retraso añadido de 750 milisegundos, lo que hace que este un poco menos intensa cuando hay varios eventos de cambio de tamaño fuego en rápida sucesión (que es a menudo el caso de los navegadores de escritorio al cambiar el tamaño usando un ratón).

Bwyan
fuente
0

He estado estancado en lo mismo durante días y descubrí que agregar un evento funciona mejor.

window.addEventListener("resize", drawChart);

Simplemente agregue esta línea después de declarar su función y funcionará bien.

Reemplace drawChart con el nombre de su función.

Ansh Shrivastava
fuente
-1

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

b0y
fuente