如何在AMP页面上集成Google Charts

Question

我在“普通”（NON-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脚本”但找不到。有人能帮我吗？

Answer 1

首先，您需要一个包含图表的模板。我们称之为template.html

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

您可以将所有j放入该模板中。 iFrame应该可以工作。但请注意，只有在页面顶部低于80％的情况下才允许使用iFrame。

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

<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>

Answer 2

其实你做不到。您需要JavaScript才能使用不适用于AMP的JavaScript。

添加：

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>