javascript - 如何创建具有 100% 宽度和高度的 Google 图表？

Question

<分区>

Answer 1

来自谷歌的文档:

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 指定宽度，而不是使用 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%;
    }