如何在 AMP 页面上集成 Google Charts答案

【问题标题】：How can I integrate Google Charts on AMP pages如何在 AMP 页面上集成 Google Charts
【发布时间】：2019-03-22 22:09:38
【问题描述】：

我在“正常”（非 AMP）页面中使用 Google 表格图表。但在 AMP 页面中，它们不存在。当我在最后加载没有 /AMP 的页面时，我可以看到表格，而最后没有 /AMP。
示例：
https://lotto-6-aus-49.de/lottozahlen-von-heute-mittwoch-den-20-03-2019 和
https://lotto-6-aus-49.de/lottozahlen-von-heute-mittwoch-den-20-03-2019/amp
为了在我的网站上获取 AMP 页面，我使用了 wordpress 插件。我在 AMP 站点中搜索添加“java 脚本”但找不到。有人可以帮我吗？

【问题讨论】：

标签： charts amp-html

【解决方案1】：

首先，您需要一个带有图表的模板。我们称它为 template.html

<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="/template.html"></amp-iframe>

您可以将所有 js 放入该模板中。 iFrame 应该可以工作。但请记住，iFrame 仅在距离页面顶部低于 80% 时才允许使用。

如果您需要加载动态内容，您可以创建一个接受参数并返回包含图表的 html 文件的 php 文件。

<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="/charts.php?startDate=2019-01-01&endDate=2019-02-01"></amp-iframe>

【讨论】：

【解决方案2】：

实际上你不能。您需要 JavaScript 来处理不支持 AMP 的内容。

添加：

iFrame 解决方案：首先，您创建一个模板 (html + js) 来显示您想要显示的图表。然后使用 amp-iframe 导入该模板文件。

<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="pathtotemplate/template.html">
</amp-iframe>

【讨论】：

感谢您的回答。我不确定。现在我知道了。
您可以尝试使用 iFrame - 并通过 iFrame 加载图表
您好，感谢您的回复。你能告诉我怎么做吗？