Mat*_*ach 5 javascript google-visualization
客户拥有许多包含数据的Google电子表格，他们从中生成了工作簿中新工作表上的图表。我提供的代码使他们能够发布图表（以前生成了<script>包含JSON 的元素），将发布的JSON复制粘贴到其CMS中，并最终生成了响应 <iframe>。图表的width选项会随时更改以匹配容器，并且在调整浏览器大小时重新加载图表的通常技巧就是保持这种方式。
但是，Google表格已经更新，客户的新图表仅可以发布为“链接”或“嵌入”的选项，后者只是<iframe>前者的包装。由于<iframe>发布的广告具有固定的宽度，因此我更新了代码以处理此替代方法，从而width即时更改了iframe 的属性。
问题是该iframe的内部内容现在完全由Google生成，并且具有固定的width，而不是与包含它的iframe匹配的宽度（我要为其设置宽度）。
我无法通过脚本进入iframe来修改文档，因为它来自其他域。电子表格中嵌入的原始图表具有响应能力（调整包含电子表格的浏览器窗口的大小会非常好地调整图表的大小），但是我看不到任何方法可以在发布期间保持这种效果。
我可以将所有内容移到直接使用可视化API的脚本中，但是然后它没有使用客户端的预先生成的图表（似乎他们生成的每个图表都是不同的样式/布局，这将是维护的噩梦）。
因此：如何从Google表格文档中发布预先存在的图表，并且发布结果的响应方式与原始图表相同？
小智 2
如果您可以忍受缩放和较小的文本/细线。
解决方案是在 HTML 头部分使用这个 JS + JQuery Scaling 方法，这是 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 /sf/answers/2507382601/
$(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="/sf/answers/2507382601/">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>
| 归档时间： |
|
| 查看次数： |
1170 次 |
| 最近记录： |