Javascript 谷歌注释时间线：“引用；错误：容器宽度为零。应为有效宽度。”；_Javascript_Css_Google Visualization

Javascript 谷歌注释时间线：“引用；错误：容器宽度为零。应为有效宽度。”；

javascript css google-visualization

Javascript 谷歌注释时间线：“引用；错误：容器宽度为零。应为有效宽度。”；,javascript,css,google-visualization,Javascript,Css,Google Visualization,我需要画一个google.visualization.AnnotatedTimeLine到一个div。google使用div的宽度和高度来确定可视化的大小。不幸的是，谷歌无法获得宽度或高度，因为我正在绘制一个显示：无div，因此我得到一个错误：容器宽度为零。应为有效宽度。错误我能想到的唯一一件事就是画一个显示：blockdiv，然后隐藏div，但这样做看起来有点奇怪，因为图形将在一瞬间显示。还有其他选择吗要复制的示例代码： <!DOCTYPE html PUBLIC "-//W3C//

我需要画一个

google.visualization.AnnotatedTimeLine

到一个

div。google使用div的宽度和高度来确定可视化的大小。不幸的是，谷歌无法获得宽度或高度，因为我正在绘制一个显示：无div，因此我得到一个错误：容器宽度为零。应为有效宽度。错误

我能想到的唯一一件事就是画一个显示：blockdiv，然后隐藏div，但这样做看起来有点奇怪，因为图形将在一瞬间显示。还有其他选择吗

要复制的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
    function drawVisualization() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sold Pencils');
      data.addColumn('string', 'title1');
      data.addColumn('string', 'text1');
      data.addColumn('number', 'Sold Pens');
      data.addColumn('string', 'title2');
      data.addColumn('string', 'text2');
      data.addRows([
        [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
        [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
        [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
        [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
        [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
        [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
      ]);

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

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial; border: 0 none;">
  <div id="visualization" style="width: 800px; height: 400px; display: none;"></div>
  <input type="button" onclick="toggle();" value="Toggle Visualization">
  <script language="javascript">  
    function toggle() {   
      var ele = document.getElementById('visualization'); 
      if(ele.style.display == "block") {
        ele.style.display = "none";
      } else {
        ele.style.display = "block";
      } 
    }  
  </script> 
</body>
</html>


谷歌可视化API示例
load（'visualization'，'1'，{packages:['annotatedtimeline']}）；
函数drawVisualization（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'salled Pencils'）；
data.addColumn（'string'，'title1'）；
data.addColumn（'string'，'text1'）；
data.addColumn（'number'，'salled Pens'）；
data.addColumn（'string'，'title2'）；
data.addColumn（'string'，'text2'）；
data.addRows([
[新日期（2008年1月1日），30000，空，空，40645，空，空]，
[新日期（2008年1月2日），14045，空，空，20374，空，空]，
[新日期（2008年1月3日），55022，空，空，50766，空，空]，
[新日期（2008年1月4日），75284，空，空，14334，'缺货'，'下午4点钢笔缺货'，
[新日期（2008年1月5日），41476，“买笔”，“买20万支”，66467，空，空]，
[新日期（2008年1月6日），33322，空，空，39463，空，空]
]);
var annotatedtimeline=new google.visualization.annotatedtimeline(
document.getElementById（'visualization'）；
绘制（数据，{'displayAnnotations'：true}）；
}
setOnLoadCallback（drawVisualization）；
函数toggle（）{
var ele=document.getElementById（'visualization'）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}否则{
ele.style.display=“块”；
} 
}

参考资料：

我在一份报告中找到了答案

任何需要一些尺寸计算来初始化的组件都不会在隐藏的选项卡中工作，因为选项卡面板本身是通过display:none隐藏的，因此其中的任何元素都不会报告其实际宽度和高度（在大多数浏览器中为0）

有一个简单的解决办法。使用隐藏非活动选项卡面板，而不是

display:none
 我也有同样的问题，可以通过将单位添加到宽度和高度来解决：
<div id="visualization" style="width: 800px; height: 400px; display: none;"></div>

@Jon的解决方案有效，但我尝试了另一种方法。我的解决方案如下：
在HTML部分中，将“div”隐藏如下：
<div id="visualization" style="width: 800px; height: 400px; display: none;">
    </div>

因为新的google.visualization.AnnotatedTimeLine需要一个可见的“div”。当您取消隐藏“div”时，可视化类成功地构造了对象。
您还可以使用style='visibility:hidden；'如果希望div“不可见”。我发布的完整HTML源代码也指定了单位，但不起作用。我很想看到您对提供的示例代码所做的编辑。
      data.addRows([
        [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
        [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
        [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
        [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
        [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
        [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
      ]);

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