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

Question

我正在尝试将此Google趋势图表嵌入我的HTML页面，但它不会显示。

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>

有什么想法吗？感谢。

Answer 1

重复。 你可能想看看这个： How to embed google trend chart in html?

主要问题是o认为你试图通过你的系统直接运行它，因此它的来源＆＃39;被解释错了。尝试在某些Web服务器上抛出html文件。试试谷歌网站或其他东西。

Answer 2

您需要将趋势结果包含在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>

请参阅此fiddle

Answer 3

我想我回答这个问题太晚了，但我希望它适用于有同样问题的人： 问题在于：使用 angular 可以在索引文件中执行标签，但是在组件中使用这些标签要复杂得多，因为它上面有 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 而不是使用 renderExploreWidgetTo，它的作用相同，但我们指示放置图形的位置，这样我们避免使用脚本标记

 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/'
}); }