如何在 html 中嵌入谷歌趋势图？答案

【问题标题】：How to embed google trend chart in html?如何在 html 中嵌入谷歌趋势图？
【发布时间】：2018-03-08 17:34:47
【问题描述】：

我看到一个网站在页面上嵌入了一个交互式谷歌趋势图：http://knowyourmeme.com/memes/danbo

当我检查元素时，图表中嵌入了代码：

<script type="text/javascript" src="http://www.google.com/trends/embed.js?hl=en-US&amp;q=danbo%20robot,danbo%20amazon,danbo%20yotsuba&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=600&amp;h=350"></script>

我检查了 html 顶部的 google 相关脚本，我发现了这些：

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-15176568-9'); ga('send', 'pageview'); </script>

<script type="text/javascript"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'http://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); googletag.cmd.push(function() { googletag.pubads().setTargeting('site', 'kym'); googletag.pubads().setTargeting('page', '_memes_danbo'); }); </script>

但是当我这样创建一个 html 文件时：

<html>

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-15176568-9'); ga('send', 'pageview'); </script>

<script type="text/javascript"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'http://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); googletag.cmd.push(function() { googletag.pubads().setTargeting('site', 'kym'); googletag.pubads().setTargeting('page', '_memes_danbo'); }); </script>

<script type="text/javascript" src="http://www.google.com/trends/embed.js?hl=en-US&amp;q=danbo%20robot,danbo%20amazon,danbo%20yotsuba&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=600&amp;h=350"></script>

</html>

我没有谷歌趋势图，但我没有得到图表，但有这个：

当您访问 Google 趋势网站时，例如http://www.google.com/trends/explore?hl=en-US#q=danbo+robot,danbo+amazon,danbo+yotsuba，有嵌入的脚本可以复制并粘贴到 html 中，但是当我把它放到我自己的 html 中时，它也不起作用。

如何在网页末尾嵌入交互式 Google 趋势图 http://knowyourmeme.com/memes/danbo？

【问题讨论】：

其实，it works。你把你的代码直接放在<html>标签里了吗？最好服从结构html > head + body。
当我在本地使用互联网连接打开 html 文件时，我得到The file or directory could not be found.而不是图表。
问题在于脚本从谷歌服务器下载的代码：document.write('<iframe width="600" height="350" src="//www.google.com/trends/fetchComponent?hl\75en-US\46q\75danbo%20robot,danbo%20amazon,danbo%20yotsuba\46content\0751\46cid\75TIMESERIES_GRAPH_0\46export\0755\46w\075600\46h\075350" style="border: none;"></iframe>'); 这部分：src="// 告诉浏览器通过主页使用的相同协议打开 iframe。在您的情况下，此协议是 file: ，显然您的硬盘上没有这样的路径。您应该使用本地服务器通过 http: 为您的页面提供服务

标签： javascript html google-trends

【解决方案1】：

在 iframe 中包含 Google 趋势结果即可。

<iframe scrolling="no" style="border:none;" width="640" height="330" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=danbo+robot,danbo+amazon,danbo+yotsuba &cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=640&h=330"></iframe>

见Demo

【讨论】：