从 Google 表格发布图表会产生固定宽度的结果
[英]Publishing a chart from Google Sheets produces fixed-width result
问题描述
A client has many Google spreadsheets containing data from which they have generated charts on new sheets within the workbook.
客户有许多 Google 电子表格，其中包含他们在工作簿中的新工作表上生成图表的数据。 I have provided code which enables them to publish the chart (which previously generated a <script> element containing JSON), copypaste the published JSON into their CMS, and have the end result be a generated responsive <iframe> .我提供了代码，使他们能够发布图表（之前生成了一个包含 JSON 的<script>元素），将发布的 JSON 复制粘贴到他们的 CMS 中，最终结果是生成的响应式<iframe> 。 The chart's width option is changed on the fly to match the container, and the usual trick of reloading the chart when the browser is resized handles keeping it that way.图表的width选项会即时更改以匹配容器，并且在调整浏览器大小时重新加载图表的常用技巧可以保持这种方式。
However, Google Sheets has been updated and the client's new charts only have an option to publish as "Link" or "Embed", where the latter is just an <iframe> wrapped around the former.然而，谷歌表格已经更新，客户的新图表只有一个选项可以发布为“链接”或“嵌入”，后者只是一个包裹前者的<iframe> 。 As the <iframe> is published with a fixed width, I have updated my code to handle this alternative, changing the width attribute of the iframe on the fly.由于<iframe>以固定宽度发布，因此我更新了代码以处理此替代方案，即时更改 iframe 的width属性。
The problem is that the internal contents of this iframe are now completely generated by Google with a fixed width , rather than a width which matches the containing iframe (whose width I am setting).问题是这个 iframe 的内部内容现在完全由 Google 生成，具有固定的宽度，而不是与包含的 iframe （我正在设置其宽度）匹配的宽度。
I can't reach into the iframe to modify the document from script, as it's from a different domain.我无法进入 iframe 以从脚本修改文档，因为它来自不同的域。 The original chart embedded in the spreadsheet is responsive (resizing the browser window containing the spreadsheet resizes the chart very nicely) but I cannot see any way to maintain that effect during publishing.嵌入在电子表格中的原始图表是响应式的（调整包含电子表格的浏览器 window 的大小可以很好地调整图表的大小）但我看不到任何方法可以在发布期间保持这种效果。
I could move everything out into script that directly uses the visualization API, but then it's not using the client's pre-generated charts (and it seems like every chart they produce is a different style/layout, which would be a maintenance nightmare).我可以将所有内容移到直接使用可视化 API 的脚本中，但是它没有使用客户端预先生成的图表（而且似乎他们生成的每个图表都是不同的样式/布局，这将是维护的噩梦）。
So: how can I publish a pre-existing chart from a Google Sheets document, with the published result being responsive in the same way as the original chart?那么：如何从 Google 表格文档中发布预先存在的图表，并且发布的结果以与原始图表相同的方式响应？
2 个解决方案
解决方案1
1 2020-06-19 11:06:18
If you can live with scaling and smaller text / thin lines .如果您可以忍受缩放和较小的文本/细线。
Solution is using this JS + JQuery Scaling method in HTML head section, this written by yazzz here , kudos to her/him in that link, not in here.解决方案是在 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&format=interactive"></iframe>
</div>
</body>
You can view his/her implementation of my sample here in JS Fiddle您可以在 JS Fiddle 中查看他/她对我的示例的实现
解决方案2
0 2022-09-26 17:57:18
From what I saw the issue is that the google sheets canvas is usually around 50% of mobile size, so here is my solution.从我看到的问题来看，谷歌表格 canvas 通常是移动设备大小的 50% 左右，所以这是我的解决方案。 It's a bit weird but works for me:这有点奇怪，但对我有用：
@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%;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.