reactjs - 在反应中添加谷歌趋势

Question

reactjs中如何在google趋势中添加图表等组件？

componentDidUpdate() {
    const that = this
    const keyword = "your keyword"

    conts script = document.createElement("script")
    script.src = "https://ssl.gstatic.com/trends_nrtr/760_RC08/embed_loader.js"
    script.async = true

    ReactDOM.findDOMNode(this.refs.trendsWrapper1).appendChild(script)

    script.onload = function () {
       trends.embed.renderExploreWidgetTo(ReactDOM.findDOMNode(that.refs.trendsWrapper1), "TIMESERIES", {"comparisonItem":[{"keyword":keyword,"geo":"","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"q=%2Fm%2F0rfgxy2","guestPath":"https://www.google.co.uk:443/trends/embed/"})
    }

}

我试过这个并没有用。请尝试提出比这更简单的方法。

Answer 1

您需要在 react 之外加载 embed_loader 脚本（就像任何其他 3rd lib 代码一样）

在组件上，运行trends.embed 命令。

var Trends = React.createClass({
  render: function() {
   trends.embed.renderWidget("US_cu_mqCQGFwBAABWOM_en", 
   "fe_line_chart_309e703b-7d68-4baa-8dc9-c12e2f9defc3", 
   {"guestPath":"https://trends.google.com:443/trends/embed/"});  
  return (
    <div>must return something :/</div>
  )}
});

这是一个例子