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%;
    }

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

1 个答案: