将.hide()和.show()与Google Visualization结合使用

Question

将.hide()和.show()与Google Visualization结合使用

我用谷歌可视化创建了一个折线图.我测试了它,它按预期工作.问题是当我在可视化上使用.hide()启动页面然后单击按钮以显示它时,它将不显示可视化.这是我所拥有的减少版本.

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

Run Code Online (Sandbox Code Playgroud)

如果我在开头注释掉.hide(),那么显示和隐藏工作的2个按钮很好,但是当它最初隐藏时它不起作用.我已经尝试将可视化代码放在查询部分上方,但它仍然无法正常工作.

有人知道怎么修这个东西吗？

谢谢,

克雷格

编辑

我能够使用这个setTimeout(function(){$('#tabs').tabs(); //或hide()},50); });

Answer 1

oli*_*oli 5

如果在隐藏元素中渲染,Gviz图形将呈现错误(通常非常小/接近不可见).在使元素可见后,您需要重新绘制图形.

基于代码执行此操作的一个简单示例,就是将绘制函数添加到show处理程序的回调中:

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

Run Code Online (Sandbox Code Playgroud)

演出完成后将执行回调.

归档时间：	14 年，1 月前
查看次数：	5887 次
最近记录：	12 年，9 月前