如何创建具有 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 图表? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

具有固定列和流动列的 CSS 布局

在 D3 v4 中使 SVG 容器具有父容器的 100% 宽度和高度(而不是像素)

宽度 100% 和高度 100% 在 chrome 中不起作用

获取浏览器视口的宽度和高度,无论内容大小如何且不调整为 100%?

如何使 html iframe 100% 的宽度和高度? [复制]

如何将 iframe 高度和宽度设置为 100%