javascript - 无法在 HTML 页面中嵌入谷歌趋势图

Question

我试图在我的 HTML 页面上嵌入这个 Google 趋势图表，但它只是没有显示出来。

https://www.google.com/trends/explore#q=%2Fm%2F07wc_c%2C%20%2Fm%2F0gtszpv%2C%20%2Fm%2F09zx_p%2C%20%2Fm%2F03lt2r&cmpt=q&tz=

代码：

<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=/m/07wc_c,+/m/0gtszpv,+/m/09zx_p,+/m/03lt2r&cmpt=q&tz&tz&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330"></script>

有任何想法吗？谢谢。

score 2 · Accepted Answer

重复。你可能想看看这个：如何在 html 中嵌入谷歌趋势图？

主要问题是您认为您正试图直接通过您的系统运行它，因此“源”被解释错误。尝试将 html 文件扔到某个 Web 服务器上。试试谷歌网站什么的。

score 0 · Accepted Answer

您需要将趋势结果包含在 iframe 中。

<iframe scrolling="no" style="border:none;" width="640" height="330" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=/m/07wc_c,+/m/0gtszpv,+/m/09zx_p,+/m/03lt2r &cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=640&h=330"></iframe>

看到这个小提琴

score 0 · Accepted Answer

我想我这个答案已经很晚了，但我希望它适用于有同样问题的人：问题在于：使用 angular 您可以在索引文件中执行标签，但是在组件中使用这些标签要多得多复杂，因为它上面有角度代码。所以我们要做的是避免在没有标签的情况下启动脚本。

1.在 index.html 文件（在正文中）粘贴 embed_loader：

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2578_RC02/embed_loader.js"></script>

2.现在我们转到您要显示图表的组件。创建一个包含图形的 div：

<div id="googleTrendsGraph"></div>

3.在 ngOnInit 我们保存我们创建的 HTML 组件：

const wrapper = document.getElementById('googleTrendsGraph');

4.我们将使用它的兄弟renderExploreWidgetTo而不是使用renderExploreWidget，它的作用相同，但我们指出我们放置图形的位置，这样我们就避免了使用脚本标签

 ngOnInit(): void {
const wrapper = document.getElementById('googleTrendsGraph');
trends.embed.renderExploreWidgetTo(wrapper, 'TIMESERIES', {
  'comparisonItem': [{
    'keyword': 'cloud tourism',
    'geo': 'KR',
    'time': 'today 5-y'
  }, {'keyword': 'computing innovations', 'geo': 'KR', 'time': 'today 5-y'}, {
    'keyword': 'computing containers',
    'geo': 'KR',
    'time': 'today 5-y'
  }, {'keyword': 'cloud services', 'geo': 'KR', 'time': 'today 5-y'}, {'keyword': 'computing ksu', 'geo': 'KR', 'time': 'today 5-y'}],
  'category': 0,
  'property': ''
}, {
  'exploreQuery': 'date=today%205-y&geo=KR&q=cloud%20tourism,computing%20innovations,computing%20containers,cloud%20services,computing%20ksu',
  'guestPath': 'https://trends.google.com:443/trends/embed/'
}); }

javascript - 无法在 HTML 页面中嵌入谷歌趋势图

3 回答 3

Related

Reference