Usando .hide() y .show() con Google Visualization

He creado un gráfico de líneas con visualización de google. Lo he probado y funciona como esperaba. El problema es cuando comienzo la página con .hide() en la visualización y luego hago clic en el botón para mostrarla, no se mostrará la visualización. Aquí hay una versión reducida de lo que tengo.Usando .hide() y .show() con Google Visualization

<script language="JavaScript"> 
    $(document).ready(function(){ 
     $('#visualization').hide(); 
     $('#show').click(function() { 
      $('#visualization').show(); 
     }); 
     $('#hide').click(function() { 
      $('#visualization').hide(); 
     }); 

    }); 
// Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']}); 
// Begin Annoted Time Line Chart - 1 
     function drawVisualization() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Number of Users'); 
      //data.addColumn('string', 'title1'); 
      data.addRows(10); 
data.setValue(0, 0, new Date(2011, 11 ,1)); 
      data.setValue(0, 1, 21); 
      data.setValue(1, 0, new Date(2011, 11 ,2)); 
      data.setValue(1, 1, 24); 
// Do this for the rest of the chart 

... 
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
       document.getElementById('visualization')); 
      annotatedtimeline.draw(data, {'displayAnnotations': true}); 
     } 

     google.setOnLoadCallback(drawVisualization); 

</script> 
<body> 
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a> 
    <div style="border:solid"> 
       <div id="visualization" style="width: 100%; height: 400px;"></div> 
     </div> 
</body>

Si comento hacia fuera del .hide() al principio los 2 botones para mostrar y ocultar funcionan bien, pero cuando esté inicialmente oculta que no funciona. He intentado colocar el código para la visualización sobre la parte de la consulta, pero todavía no funciona.

¿Alguien sabe cómo solucionar esto?

Gracias,

Craig

EDITAR

pude utilizar este setTimeout (function() {$ ('# pestañas') pestañas();. // o escondo() }, 50); });

Fuente

2011-12-20 craigtb

No sé acerca de este código específicamente, pero no hay código que detecta cuando está oculto y no lo hace es el trabajo cuando ese es el caso. Esto se hace a menudo por razones de eficiencia, por lo que no se desperdicia mucha CPU o memoria cuando el objeto está oculto. Para evitar ese problema, tendría que renderizarlo después de hacerlo visible en lugar de antes. – jfriend00

Los gráficos Gviz se mostrarán incorrectamente (a menudo extremadamente pequeños/casi invisibles) si se representan en un elemento oculto. Debe volver a dibujar el gráfico después de hacer visible el elemento.

Un ejemplo simple de hacer esto, sobre la base de su código, habría algo en la línea de la adición de la función de su sorteo para la devolución de llamada de la serie manejador:

$('#visualization').show(function() { 
    drawVisualization(); 
});

La devolución de llamada se ejecuta una vez el espectáculo Esta completo.

Fuente

2011-12-22 07:57:19 oli

He intentado con el consejo proporcionado por Oli arriba, pero el redibujado no funcionó para mí en Chrome.

Un mejor enfoque para mí fue definir la altura y el ancho en el gráfico con números fijos. https://developers.google.com/chart/interactive/docs/gallery/bubblechart describe las opciones.

simplemente he utilizado este y funciona:

var options = { 
     title: '<%= t("views.participants.ranking.s23") %>', 
     colors:['#3f3f3f', '#199EDA'], 
     chartArea: {top: 30, left: 80, width: 490, height: 300}, 
     height: 500, 
     width: 710, 
     legend: {position: 'right', alignment: 'start'}, 
     sizeAxis: {maxSize: 20} 
     }

Fuente

2013-03-31 14:58:57

Usando .hide() y .show() con Google Visualization

Respuesta

Cuestiones relacionadas