4

我需要绘制google.visualization.AnnotatedTimeLine一个<div id="visualization" style="width: 800px; height: 400px; display: none;"></div>div。Google 使用 div 的宽度和高度来确定可视化的大小。不幸的是，谷歌无法获得宽度或高度，因为我正在向显示器绘图：无；div，因此我得到一个错误：容器宽度为零。期望一个有效的宽度。错误。

我唯一能想到的就是绘制到一个显示器上：block; div 然后隐藏 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>

参考：

https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline

http://code.google.com/apis/ajax/playground/?type=visualization

4

4 回答 4

3

我在jQuery UI 页面上找到了答案。

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

有一个简单的解决方法。使用off-left 技术来隐藏非活动的选项卡面板，而不是display: none;.

于 2012-09-07T16:49:30.940 回答
2

我有同样的问题，可以通过将单位添加到宽度和高度来解决它：

<div id="visualization" style="width: 800px; height: 400px; display: none;"></div>
于 2012-11-05T13:08:38.710 回答
1

@Jon 的解决方案有效，但我尝试了不同的方法。我的解决方案是这样的：

在 HTML 部分使“div”像这样隐藏：

<div id="visualization" style="width: 800px; height: 400px; display: none;">
    </div>

在脚本标签之间，使“div”在 AnnotatedTimeLine 行之前可见

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

因为new google.visualization.AnnotatedTimeLine需要一个可见的“div”。当您取消隐藏“div”时，可视化类成功构造对象。

于 2013-03-04T22:09:34.347 回答
0

你也可以使用 style='visibility: hidden;' 如果您希望您的 div 是“不可见的”。

于 2013-12-04T08:48:09.223 回答