如何使谷歌电子表格图表响应

Posted 2023-03-06

【中文标题】如何使谷歌电子表格图表响应

【英文标题】：How to make google spreadsheet graphs responsive

【发布时间】：2014-08-30 06:10:25

【问题描述】：

<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>

即使将宽度更改为 100%，它也不会使其响应。我将此图嵌入到 WordPress 网站上。

【问题讨论】：

请给我们您的 wordpress 网站地址，以便我们在现场看到问题。

您可以同时输入width="100%" 和style="max-width:100%"。在您的代码中，有一个固定的宽度...

@msbodetti URL - getcsr.com/index.php/256-2

@Valentin Mercier getcsr.com/index.php/256-2

我有一个解决方案，但问题是值不是动态的，他们手动添加了这些值。无论如何要更改它并使用我的谷歌电子表格中的值，就像在谷歌电子表格中一样，我的值会不断变化。 codepen.io/shoogledesigns/pen/BfLkA

【参考方案1】：

将 div 放在该 iframe 周围（作为父元素），并将 CSS“transform: scale(0.5)”设置为该 div。

<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>

它将调整整个框架的大小，包括其内容。

【讨论】：

我添加了更多样式：transform: scale(0.5, 0.5) translate(-50%, 0px); width: 200%; 将其向左移动一点并使用整个宽度。否则它也会使用更少的空间。

【参考方案2】：

我已经在网上为您做了一些查看，并有几个解决方案。最受欢迎的方法之一似乎是使用 JQuery 来正确调整 iFrame 的大小。

这里有一个脚本链接：jQuery Responsive iFrame's

<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  var ri = responsiveIframe();
  ri.allowResponsiveEmbedding();
</script>

<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  ;(function($)          
      $(function()
        $('#myIframeID').responsiveIframe( xdomain: '*');
      );        
  )(jQuery);
</script>

从那里只需使 iFrame 的 ID 为 myIframeID 或简单地更改上面脚本中的文本以适应这一点。

如果这对您不起作用，我建议使用我的 Google 搜索字符串来寻找其他可能的解决方案：responsive iframe width

祝你好运！

【讨论】：

嘿，你能告诉我如何把它放在 WordPress 网站上。我对此一无所知。就您的第二个选项而言，我尝试了很多，即使在谷歌搜索之后也没有得到任何解决方案。

我有一个解决方案，但问题是值不是动态的，他们手动添加了这些值。无论如何要更改它并使用我的谷歌电子表格中的值，就像在谷歌电子表格中一样，我的值会不断变化。 codepen.io/shoogledesigns/pen/BfLkA