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

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

我试过使用明显的width: 100%例如，但这不起作用。

2014-05-12 user2656114

您的HTML标记是什么样的？你将“宽度：100％”设置为？ – aapierce

这是更好的答案https://stackoverflow.com/questions/23593514/google-visualization-chart-size-in-percentage – sshevlyagin

从谷歌的文档：

一种非常常见的选项设置为图表的高度和宽度。您可以在两个地方指定图表大小：在容器的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%; 
    }

来源

2014-05-12 22:35:06 tomysshadow

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

回答

相关问题