2017-10-08 166 views
1

如何在谷歌的reactjs趨勢中添加組件如圖表?添加谷歌的反應趨勢

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/"}) 
    } 

} 

我試過這個,並沒有工作。請嘗試建議一個比這更簡單的方法。

回答

0

您需要加載embed_loader腳本出反應(像任何其他第三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> 
)} 
}); 

Here is an example