javascript 如何创建具有 100% 宽度和高度的 Google 图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23619255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a Google Chart that has a 100% width and height?
提问by user2656114
How can I create a Google Chart that has a 100% width and height?
如何创建具有 100% 宽度和高度的 Google 图表？
I've tried using the obvious width: 100%for example but this doesn't work.
例如，我尝试使用明显的方法width: 100%，但这不起作用。
采纳答案by tomysshadow
From Google's doc:
来自谷歌的文档：
One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.
一个非常常见的设置选项是图表高度和宽度。您可以在两个位置指定图表大小：在容器元素的 HTML 中，或在图表选项中。如果您在两个位置都指定了大小，则图表通常会遵循 HTML 中指定的大小。如果您未在 HTML 中或作为选项指定图表大小，则图表可能无法正确呈现。
The solution is to specify the width using HTML, rather than using Javascript. So this:
解决方案是使用 HTML 指定宽度，而不是使用 Javascript。所以这：
var options = {
'legend':'left',
'title':'My Big Pie Chart',
'is3D':true,
'width':100%,
'height':500
}
WILL NOT WORK.
不管用。
Now here is another tricky bit. If you omit the height from your CSS, it will not work either. The chart will display at the minimum height, which isn't what you want. However, if you add height:100%; that will not make any difference. The chart will still display it its minimum height. Why? Well, in HTML 4, the body element was as large as the entire browser window. Therefore, setting an element's height to 100% would make that element fit to the entire window's size. But in HTML5, the body element, by default, is only as large as its contents. So by setting an element's height to 100% in HTML5, you are only saying you want the element to be as tall as it naturally would be.
现在这是另一个棘手的问题。如果您从 CSS 中省略高度，它也不会起作用。图表将以最小高度显示，这不是您想要的。但是，如果添加 height:100%; 那不会有任何区别。图表仍将显示其最小高度。为什么？嗯，在 HTML 4 中，body 元素和整个浏览器窗口一样大。因此，将元素的高度设置为 100% 将使该元素适合整个窗口的大小。但在 HTML5 中，默认情况下 body 元素仅与其内容一样大。因此，通过在 HTML5 中将元素的高度设置为 100%，您只是在说您希望元素与自然一样高。
The lazy solution would be to remove the DOCTYPE and xlmns attribute at the beginning of the document so your page uses HTML 4 instead, but then any other HTML5 features won't work. So instead, you can set the html/body tag's height to 100% with CSS so it fills your entire browser window, like this:
懒惰的解决方案是删除文档开头的 DOCTYPE 和 xlmns 属性，以便您的页面改用 HTML 4，但随后任何其他 HTML5 功能都将不起作用。因此，您可以使用 CSS 将 html/body 标签的高度设置为 100%，使其填满整个浏览器窗口，如下所示：
html, body {
width: 100%;
height: 100%;
}
