如何創建寬度和高度均爲100％的Google圖表？

Question

如何創建寬度和高度均爲100％的Google圖表？

我試過使用明顯的width: 100%例如，但這不起作用。

Answer 1

從谷歌的文檔：

一種非常常見的選項設置爲圖表的高度和寬度。您可以在兩個地方指定圖表大小： 在容器 的HTML中，或者在圖表選項中。如果您在兩個位置都指定了 的尺寸，則圖表通常會推遲到HTML中指定的尺寸 。如果您沒有在HTML或 中指定圖表大小作爲選項，則圖表可能無法正確呈現。

解決方法是使用HTML指定寬度，而不是使用Javascript。所以這個：

var options = { 
    'legend':'left', 
    'title':'My Big Pie Chart', 
    'is3D':true, 
    'width':100%, 
    'height':500 
} 

是行不通的。

現在，這是另一個棘手的問題。如果你忽略CSS的高度，它也不會起作用。圖表將顯示在最低高度，這不是你想要的。但是，如果您添加高度：100％;這不會有什麼區別。該圖表仍將其顯示爲最小高度。爲什麼？那麼，在HTML 4中，body元素與整個瀏覽器窗口一樣大。因此，將元素的高度設置爲100％會使該元素適合整個窗口的大小。但在HTML5中，默認情況下，body元素只與其內容一樣大。因此，通過在HTML5中將元素的高度設置爲100％，您只是希望元素的高度與其自然相同。

懶惰的解決方案是刪除文檔開頭的DOCTYPE和xlmns屬性，以便頁面使用HTML 4，但是其他任何HTML5功能都不起作用。相反，您可以使用CSS將html/body標記的高度設置爲100％，以便填充整個瀏覽器窗口，如下所示：

html, body { 
     width: 100%; 
     height: 100%; 
    }