从 Google 表格发布图表会产生固定宽度的结果

Publishing a chart from Google Sheets produces fixed-width result

本文关键字：固定宽度 结果 Google 表格 布图表      更新时间：2023-09-26

客户端有许多 Google 电子表格，其中包含他们在工作簿中的新工作表上生成图表的数据。我提供了代码，使他们能够发布图表（之前生成了一个包含 JSON 的 <script> 元素），将发布的 JSON 复制粘贴到他们的 CMS 中，并让最终结果是生成的响应式<iframe>。图表的width选项会动态更改以匹配容器，并且在调整浏览器大小时重新加载图表的常用技巧可以保持这种方式。

但是，Google 表格已更新，客户的新图表只能选择发布为"链接"或"嵌入"，后者只是包裹在前者的<iframe>。由于<iframe>以固定宽度发布，因此我更新了代码以处理此替代方法，动态更改了 iframe 的 width 属性。

问题是这个iframe的内部内容现在完全由Google以固定宽度生成，而不是与包含的iframe（我正在设置其宽度）匹配的宽度。

我无法进入 iframe 从脚本修改文档，因为它来自不同的域。嵌入在电子表格中的原始图表是响应式的（调整包含电子表格的浏览器窗口的大小可以很好地调整图表的大小），但我看不到任何方法可以在发布过程中保持这种效果。

我可以将所有内容移动到直接使用可视化 API 的脚本中，但它不使用客户端预先生成的图表（似乎他们生成的每个图表都是不同的样式/布局，这将是一场维护噩梦）。

那么：如何从 Google 表格文档中发布预先存在的图表，并使发布的结果以与原始图表相同的方式响应？

如果您可以接受缩放和较小的文本/细线。

解决方案是在 HTML head 部分中使用这种 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 中查看他/她对我的示例的实现

从我所看到的问题是谷歌表格画布通常是移动尺寸的 50% 左右，所以这是我的解决方案。这有点奇怪，但对我有用：

@media (max-width:500px) {
    body p:has(iframe[src^="https://docs.google.com/spreadsheets"]) {
        transform: scale(0.5);
        transform-origin: top left;
    }
    body p iframe[src^="https://docs.google.com/spreadsheets"] {
        min-width: 200%;
        position: relative;
        left: 100%;
        margin-bottom: -180%;       
    }
}
相关文章：