css - 响应式谷歌图表如何来自 iframe 标签？

问题描述

我想从谷歌表创建一个图表。我从电子表格中导出图表，获取一个 URL。但由于 cors 问题，我无法使其响应。所以，我认为整个 iframe 通过变换响应：缩放？但这不可能是一个好的解决方案。你有什么想法让这个 iframe 响应吗？

以下是我的片段：-

<div
        class="responsive"
     
      >
        <iframe
        width="698.1827830188679"
          height="305.5"
          seamless
          frameborder="0"
          scrolling="no"
          src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQuSWCpXJIwSPNJEE6iqzsJTxkPdSiL6uZaqph-CtMXh5QDw8Z9pESPB_0VenmhF4Dx6H5GLylHztAO/pubchart?oid=1827562470&amp;format=interactive"
        ></iframe>
      </div>

此外，您可以在下面查看小提琴，

https://jsfiddle.net/qtro2Lz5/

标签： cssiframegoogle-sheetstransformresponsive

对于这个谷歌电子表格发布的图表，我也面临这个问题。顺便说一句，您的标题具有误导性，这不是 Google Chart，它是 Google 的另一个不同产品，用于创建真正合适的网络图表，它也可以是响应式的，也可以使用电子表格数据。

回到问题，“谷歌电子表格发布的图表”内容本身没有响应，它不是关于如何使 iframe 本身响应。

iframe 可以是响应式的，但我们无法将已发布的 Google 电子表格中的图表内容修改为响应式，afaik。

我已经尝试了一些类似的技巧，它只适用于视频和一些响应式内容网站。

http://jsfiddle.net/marhensa/g9op54wx/

还有一些像这样的巧妙技巧

https://codepen.io/alxfyv/pen/QEjEbp

但问题是 iframe内容也必须是响应式的。

如果您只是想让它工作并且非常简单，不要使用 iframe，使用简单的图像响应，只需将您发布的 Google 电子表格图表 URL 的末尾从 format=interactive 更改为 format=image

遗憾的是，解决此问题的正确方法只有 SCALING，就像您在问题中所说的转换/缩放它一样。如果 wrapper 的内容没有响应，并且您想像这个记录的示例一样动态调整它的大小（文本也会更小），那么就可以缩放它。顺便说一下，这个例子是一个 HTML 文本和一些图形页面，它在缩放时表现得像 SVG / 图像文件。

在这里解释：https ://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript

也在 Angular 中完成：https ://stackblitz.com/edit/angular-vagpoq

编辑：如果你能忍受缩放和更小的文本/细线，工作解决方案是在 HTML 头部部分使用这个 JS + JQuery 缩放方法，这是由 yazzz在这里写的，在那个链接中对她/他表示敬意，而不是在这里。

<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
    $("#wrapper").each(function() {
        var $wrap = $(this);
        function iframeScaler(){
            var wrapWidth = $wrap.width(); // width of the wrapper
            var wrapHeight = $wrap.height();
            var childWidth = $wrap.children("iframe").width(); // width of child iframe
            var childHeight = $wrap.children("iframe").height(); // child height
            var wScale = wrapWidth / childWidth;
            var hScale = wrapHeight / childHeight;
            var scale = Math.min(wScale,hScale);  // get the lowest ratio
            $wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" });  // set scale
        };
        $(window).on("resize", iframeScaler);
        $(document).ready( iframeScaler);
    });
});
</script>
</head>

<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of <a href="https://stackoverflow.com/a/35819751/9894532">yazzz from Javascript StackOverflow</a></p>

<div id="wrapper">
    <iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&amp;format=interactive"></iframe>
</div>

</body>

您也可以在 JS Fiddle 中查看他/她对我的示例的实现

https://jsfiddle.net/marhensa/10radjqo

css - 响应式谷歌图表如何来自 iframe 标签？

问题描述

解决方案

推荐阅读