無法呈現兩個相同的React組件，具體反應谷歌圖表

Question

我可以得到反應谷歌圖表渲染一個單一的圖表沒有任何麻煩。但是，當我嘗試添加另一個圖表類型的第二個圖表時，它無法呈現它。這是因爲它認爲第二種圖表類型與第一種圖表類型完全相同。這是一個簡單的例子。

render() { 
    return (
     <div> 
      <div className="forcastingChart"> 
       <Chart id="chart1" chartType="ColumnChart" data={this.state.data} width="100%" options={this.state.options}></Chart> 
      </div> 
      <div className="GanttChart"> 
       <Chart id="chart2" chartType = "Gantt" columns={this.state.columns} rows={this.state.rows} chartPackages={['gantt']} 
        width="100%" height="9999px"></Chart> 
      </div> 
     </div> 
    ); 
} 

它只能成功呈現我列出的圖表，在本例中爲ColumnChart。如果我要切換它們，只有甘特圖會成功加​​載。

這是前面的代碼呈現的圖像。

Answer 1

嘗試更新你的反應，谷歌，圖表節點模塊，以確保你有適當的一個甘特圖表類型：

npm update react-google-charts 

而且你必須使用不同的graph_id性質爲每個圖表：

<div className="forcastingChart"> 
    <Chart 
     graph_id="chart1" 
     id="chart1" 
     chartType="ColumnChart" 
     data={this.state.data} 
     width="100%" 
     options={this.state.options}> 
    </Chart> 
</div> 
<div className="GanttChart"> 
    <Chart 
     graph_id="chart2" 
     id="chart2" 
     chartType = "Gantt" 
     columns={this.state.columns} 
     rows={this.state.rows} 
     chartPackages={['gantt']} 
     width="100%" height="9999px"> 
    </Chart> 
</div>