无法在本地 HTML 文件中嵌入 Google 趋势图表

问题描述

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

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

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

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

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

解决方法

请找到下面的代码片段，我试图解决你在第一段中遇到的问题，希望这个解决方案对你有用

<!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>

dashboard google-trends html