：「錯誤：容器寬度爲零，期望有效寬度。」

我需要畫一個google.visualization.AnnotatedTimeLine到<div id="visualization" style="width: 800px; height: 400px; display: none;"></div>股利。 Google使用div的寬度和高度來確定可視化的大小。不幸的是，Google無法獲得寬度或高度，因爲我正在繪製一個display：none;股利，因此我得到一個錯誤：容器寬度爲零。期待有效的寬度。錯誤。：「錯誤：容器寬度爲零，期望有效寬度。」

，我能想到做的唯一一件事就是畫上顯示：塊; 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

來源

2012-09-02 Jon

我碰到的答案上jQuery UI page。

，需要用於其初始化不會在一個隱藏的標籤工作一些維計算，因爲標籤面板本身經由顯示隱藏的任何組分：無，這樣任何元素內將不報告他們的實際寬度和高度（0在大多數瀏覽器中）。

有一個簡單的解決方法。使用off-left technique隱藏非活動選項卡面板而不是display: none;。

來源

2012-09-07 16:49:30 Jon

非常感謝。 – trante

我有同樣的問題，可以通過添加的單位的寬度和高度，解決它：

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

來源

2012-11-05 13:08:38

我發佈的完整HTML源代碼也指定了單元，但不起作用。我希望看到您對所提供示例代碼的編輯。 – Jon

這不起作用。 – trante

@喬恩的解決方案作品，但我嘗試了不同的方式。我的解決辦法是這樣的：

在HTML部分使「格」隱藏的是這樣的：

<div id="visualization" style="width: 800px; height: 400px; display: none;"> 
    </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-04 22:09:34 trante

你也可以使用樣式= 'visibility：hidden的;'如果你想讓你的div「隱形」。

來源

2013-12-04 08:48:09 EricClapton

：「錯誤：容器寬度爲零，期望有效寬度。」

回答

相關問題