Question

我用谷歌可视化创建了一个折线图。我测试了它，它按预期工作。问题是当我在可视化上使用.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>

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

任何人都知道如何解决这个问题？

谢谢，

克雷格

修改

我能够使用它的setTimeout（函数（）{ $（ '＃标签'）选项卡（）。 //或隐藏（） }，50）; }）;

Answer 1

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

根据您的代码执行此操作的一个简单示例，就是将绘制函数添加到show处理程序的回调中：

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

一旦节目完成，将执行回调。

Answer 2

我已经尝试过Oli提供的建议，但重新绘图对我来说并不适用于Chrome。

对我来说更好的方法是使用固定数字定义图表中的高度和宽度。 https://developers.google.com/chart/interactive/docs/gallery/bubblechart描述了这些选项。

我只是使用它并且它有效：

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

将.hide（）和.show（）与Google Visualization结合使用

2 个答案: