Google 趋势小部件 - 相关查询 - 通过自动点击 (ng-click) 将视图从热门更改为上升

Question

Google Trends 允许在任何 HTML 页面上嵌入搜索趋势数据的小部件。“相关查询”小部件显示热门和上升搜索查询的数据。默认情况下，当嵌入的小部件加载时，它会显示热门查询。

我想默认显示“上升查询”视图而不是“热门查询”视图。可以从小部件菜单手动切换。我正在寻找一种方法来自动化该过程，方法是在 HTML 页面上的 1 个或多个小部件中仅显示上升的查询视图。

“Stack Overflow”关键字的相关查询小部件示例：https ://jsfiddle.net/Lox8heyt/

图片： https: //i.stack.imgur.com/Wnqxa.png

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("RELATED_QUERIES", {"comparisonItem":[{"keyword":"Stack Overflow","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=Stack%20Overflow&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script> 

Google Trends API：我没有在小部件代码中找到更改视图的选项。

是否可以通过JS自动点击小部件按钮将视图从顶部更改为上升？例如使用 XPath 或 JS 路径？

NG-点击：

ng-click="ctrl.setViewField('risingBullets')
ng-click="ctrl.setViewField('bullets')"

X路径：

//*[@id="menu_container_0"]/md-menu-content/md-menu-item[1]/button

JS路径：

document.querySelector("#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button")

选择器：

#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button

Answer 1

这本身不是答案，但我希望它能有所帮助

看看谷歌趋势小部件，它清楚地用角度写成，

通常，您可以从 jquery 调用 Angular 方法，如下所示：

angular.element($(".md-menu-item-text")).triggerHandler('click');
//angular.element('#someElemnt').scope().AngularFunction();

有很多关于如何做到这一点的例子：

使用 Jquery 调用 Angular 函数

如何从 JavaScript 调用角度范围函数？

仅举几例......但是，从我的测试来看，这似乎只有在您单击谷歌趋势小部件后才起作用，我认为这是因为该小部件创建了一个 iframe，该 iframe 似乎需要用户交互才能在父页面可以看到角度并且因为它是动态渲染的 iframe，所以您无法以任何有意义的方式强制激活或挂钩它。您可以尝试使用具有回调功能的npm版本

googleTrends.interestOverTime({keyword: ['Women\'s march', 'Trump Inauguration']})
.then(function(results){
  console.log('These results are awesome', results);
  //call some function here 
})
.catch(function(err){
  console.error('Oh no there was an error', err);
});

在“then”方法中，您应该可以访问 Angular 来查找调用其事件的元素，因为此时您知道 Angular 已加载且可访问，但这只是我尚未测试的理论，

我注意到在加载函数上使用 jquery 文档时，角度未定义（再次因为它似乎在 iframe 中），但是一旦您以任何方式与小部件交互，那么您似乎就能够访问其中的元素并且可以调用 Angular 并可以使用上面的示例代码调用相关按钮的单击事件

您可以查看实际使用 Angular 来实现谷歌趋势，这似乎是谷歌在其示例页面中使用的内容：https ://trends.google.com/trends/explore

似乎已将上升设置为某些示例的默认选项，这意味着它一定是可能的

我希望这有帮助