Question

一旦页面加载谷歌趋势图正在trendBlock类下加载。在调用next_fun（）后，在下面的代码中完成html代码，使用图形进行渲染。我需要在trendsBlock中进行渲染。

<html>
<body>

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

<div class="trendsBlock">
    <script type="text/javascript"> 
        trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"IN","time":"2016-10-02 2017-11-02"},{"keyword":"citi bank","geo":"IN","time":"2016-10-02 2017-11-02"}],"category":0,"property":""}, {"exploreQuery":"date=2016-10-02 2017-11-02,2016-10-02 2017-11-02&geo=IN&q=dbs%20bank,citi%20bank","guestPath":"https://trends.google.com:443/trends/embed/"}); 
    </script> 

</div>


<button onclick="next_fun()">Click to next trends</button>  

<script type="text/javascript">

    function next_fun(){

        //innerHTML in to class trendsBlock

        //?

    }

</script>
</body>
</html>

Answer 1

renderExploreWidgetTo 方法允许将图表嵌入到任何HTML元素中。

您可以查看以下示例代码以了解。

function next_fun(){

var divElem = document.getElementById('sampDiv');

trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
  
}

    <html>
    <body>

 <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>

    <div id='sampDiv'>
    </div>


    <button onclick="next_fun()">Click to next trends</button>  
    </body>
    </html>

P.S：当我在StackOverflow的内部编译器/浏览器中运行上面的代码时，它会抛出一个错误。 Error img!!

但其他方式也可以。

如何将谷歌趋势嵌入到div中

1 个答案: