如何创建宽度和高度均为100%的Google图表？

Question

如何创建宽度和高度均为100%的Google图表？

我试过使用明显width: 100%的例子,但这不起作用.

Answer 1

来自Google的文档:

设置的一个非常常见的选项是图表高度和宽度.您可以在两个位置指定图表大小:在容器元素的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%;
    }