如何在 AMP 页面上集成 Google 个图表

Question

我在 "normal"（非 AMP）页面中使用 Google Table 图表。但在 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 scripts"，但找不到。有人可以帮助我吗？

Answer 1

实际上你不能。对于不适用于 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>

Answer 2

首先，您需要一个包含图表的模板。我们称之为 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 应该可以工作。但请记住，仅当距离页面顶部低于 80% 时才允许使用 iFrame。

如果您需要加载动态内容，您可以创建一个接受参数的 php 文件和 returns 一个包含图表的 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>

如何在 AMP 页面上集成 Google 个图表

How can I integrate Google Charts on AMP pages

charts

amp-html