在本地 HTML 文件中嵌入 Google 趋势图时遇到问题答案

【问题标题】：Trouble Embedding Google Trends Chart in Local HTML File在本地 HTML 文件中嵌入 Google 趋势图时遇到问题
【发布时间】：2021-06-17 03:11:54
【问题描述】：

我正在尝试创建一个本地仪表板，其中包含各种主题的嵌入式谷歌趋势图表。当我创建一个标准的 HTML 文件并粘贴来自 Google 趋势的代码 sn-p 时，图表变为全宽，但在大约 300 像素处被截断：Original Code Output

我环顾四周并尝试了一个 iframe 解决方案（正如人们在此处的其他帖子中所建议的那样），但我在实施它时遇到了麻烦。我对使用 iframe 和高级元素/标签非常陌生。

这是我根据我在这里看到的其他示例自定义的代码的链接：https://drive.google.com/file/d/1w6Dnyk0h4ktJ7KaRz-yrpqVhlHmhWVp-/view?usp=sharing

当我在浏览器中本地打开文件时，呈现的代码如下所示： Unexpected Results from Code

这可能是一个愚蠢的问题，但即便如此，我还是很想得到一些帮助！谢谢！

【问题讨论】：

标签： html css dashboard google-trends

【解决方案1】：

请在下面找到代码 sn-p，我试图解决您在第一段中遇到的问题，希望此解决方案对您有用

<!DOCTYPE html>
<html>
<head>

<style>
.myDiv {
  border: 1px outset lightblue;
  background-color: lightgray;
  text-align: left;
}
</style>

</head>

<body>

  <h1>Data Tracking</h1>
  
        <h2>COVID-19 Data</h2>
        
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2431_RC04/embed_loader.js"></script> 
<script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/03376x","geo":"GB","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"date=today%205-y&geo=GB&q=%2Fm%2F03376x","guestPath":"https://trends.google.com:443/trends/embed/"}); 

</script>
<script type="text/javascript">
document.getElementsByTagName("iframe")[0].addEventListener( "load", function(e) {
    this.setAttribute('height','450px')
} );
</script>

            
  
</body>
</html>

【讨论】：