在Google Visualization中使用.hide（）和.show（） [英] Using .hide() and .show() with Google Visualization
问题描述
我用谷歌可视化创建了一个线图。我已经测试过它，它按预期工作。问题是当我在可视化文件中用.hide（）开始页面时，然后单击按钮来显示它，它将不会显示可视化文件。这里是我所拥有的减价版。
< script language =JavaScript>
$（document）.ready（function（）{
$（'＃visualization'）。hide（）;
$（'＃show'）。click（function（）{
$（'＃visualization'）。show（）;
}）;
$（'＃hide'）。click（function（）{
$（'＃visualization' ）.hide（）;
}）;
}）;
//加载Visualization API和饼图包。
google.load（'visualization'，'1.0'，{'packages'：['corechart'，'annotatedtimeline']}）;
//开始注释时间线图 - 1
函数drawVisualization（）{
var data = new google.visualization.DataTable（）;
data.addColumn（'date'，'Date'）;
data.addColumn（'数字'，'用户数量'）;
//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）;
//为图表的其余部分执行此操作
...
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>隐藏< / a>
< div style =border：solid>
< div id =visualizationstyle =width：100％; height：400px;>< / div>
< / div>
< / body>
如果我在开头注释掉.hide（）2个按钮来显示和隐藏工作正常，但当它最初隐藏它不起作用。我曾尝试将查询部分的代码放置在查询部分的上方，但它仍然无效。
任何人都知道如何解决这个问题？
谢谢，
克雷格
编辑
我可以使用这个
setTimeout（function（）{
$（'＃tabs'）。tabs（）; //或hide（）
}， 50）;
}）;
如果呈现为Gviz图形，Gviz图形将呈现不正确（通常非常小/接近不可见）隐藏的元素。在使元素可见之后，您需要重新绘制图形。
一个简单的基于您的代码的例子将会沿着添加绘图函数的方向到show handler的回调函数：
$ $ p $ $'$'$'$'$''。show（function（）{
drawVisualization（）;
}）;
完成展示后，回调将被执行。
I have created a line graph with google visualization. I have tested it and it works as expected. The problem is when I start the page with .hide() on the visualization and then click the button to show it, it will not display the visualization. Here is a cut down version of what I have.
<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>
If I comment out the .hide() at the beginning the 2 buttons to show and hide work fine, but when its initially hidden it does not work. I have tried placing the code for the visualization above the query part but it still will not work.
Anyone know how to fix this?
Thanks,
Craig
EDIT
I was able to use this setTimeout(function(){ $('#tabs').tabs(); // or hide() }, 50); });
Gviz graphs will render incorrectly (often extremely small/close to invisible) if rendered in a hidden element. You need to redraw the graph after making the element visible.
A simple example of doing this, based on your code, would be something along the lines of adding your draw function to the callback of the show handler:
$('#visualization').show(function() {
drawVisualization();
});
The callback will be executed once the show is complete.
这篇关于在Google Visualization中使用.hide（）和.show（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
