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