如何创建具有 100% 宽度和高度的 Google 图表? [复制]
Posted
技术标签:
【中文标题】如何创建具有 100% 宽度和高度的 Google 图表? [复制]【英文标题】:How can I create a Google Chart that has a 100% width and height? [duplicate] 【发布时间】:2014-06-30 10:03:28 【问题描述】:如何创建具有 100% 宽度和高度的 Google 图表?
例如,我尝试使用明显的width: 100%
,但这不起作用。
【问题讨论】:
您的 html 标记是什么样的?你将width: 100%
设置成什么?
这是一个更好的答案***.com/questions/23593514/…
【参考方案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%;
【讨论】:
以上是关于如何创建具有 100% 宽度和高度的 Google 图表? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
在 D3 v4 中使 SVG 容器具有父容器的 100% 宽度和高度(而不是像素)
宽度 100% 和高度 100% 在 chrome 中不起作用
获取浏览器视口的宽度和高度,无论内容大小如何且不调整为 100%?