如何创建具有 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 中省略高度，它也将不起作用。图表将显示在最小高度，这不是您想要的。但是，如果添加 height:100%;这不会有任何区别。图表仍将显示其最小高度。为什么？那么，在 HTML 4 中，body 元素与整个浏览器窗口一样大。因此，将元素的高度设置为 100% 将使该元素适合整个窗口的大小。但在 HTML5 中，默认情况下，body 元素仅与其内容一样大。因此，通过在 HTML5 中将元素的高度设置为 100%，您只是说您希望元素尽可能高。

懒惰的解决方案是删除文档开头的 DOCTYPE 和 xlmns 属性，以便您的页面改用 HTML 4，但随后任何其他 HTML5 功能都将不起作用。因此，您可以使用 CSS 将 html/body 标记的高度设置为 100%，以便它填满整个浏览器窗口，如下所示：

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