从 Google 表格发布图表会产生固定宽度的结果
[英]Publishing a chart from Google Sheets produces fixed-width result
问题描述
客户有许多 Google 电子表格，其中包含他们在工作簿中的新工作表上生成图表的数据。 我提供了代码，使他们能够发布图表（之前生成了一个包含 JSON 的<script>元素），将发布的 JSON 复制粘贴到他们的 CMS 中，最终结果是生成的响应式<iframe> 。 图表的width选项会即时更改以匹配容器，并且在调整浏览器大小时重新加载图表的常用技巧可以保持这种方式。
然而，谷歌表格已经更新，客户的新图表只有一个选项可以发布为“链接”或“嵌入”，后者只是一个包裹前者的<iframe> 。 由于<iframe>以固定宽度发布，因此我更新了代码以处理此替代方案，即时更改 iframe 的width属性。
问题是这个 iframe 的内部内容现在完全由 Google 生成，具有固定的宽度，而不是与包含的 iframe （我正在设置其宽度）匹配的宽度。
我无法进入 iframe 以从脚本修改文档，因为它来自不同的域。 嵌入在电子表格中的原始图表是响应式的（调整包含电子表格的浏览器 window 的大小可以很好地调整图表的大小）但我看不到任何方法可以在发布期间保持这种效果。
我可以将所有内容移到直接使用可视化 API 的脚本中，但是它没有使用客户端预先生成的图表（而且似乎他们生成的每个图表都是不同的样式/布局，这将是维护的噩梦）。
那么：如何从 Google 表格文档中发布预先存在的图表，并且发布的结果以与原始图表相同的方式响应？
2 个解决方案
解决方案1
1 2020-06-19 11:06:18
如果您可以忍受缩放和较小的文本/细线。
解决方案是在 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>
您可以在 JS Fiddle 中查看他/她对我的示例的实现
解决方案2
0 2022-09-26 17:57:18
从我看到的问题来看，谷歌表格 canvas 通常是移动设备大小的 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%;
}
}
固定宽度字符的确切宽度和高度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.