同じ反応コンポーネントの2つ、特に反応Googleチャートをレンダリングできません

Question

反応するGoogleチャートを取得して、問題なく1つのグラフを表示できます。しかし、別のグラフタイプの2番目のグラフを追加しようとすると、それをレンダリングできません。これは、2番目のグラフの種類が最初のグラフの種類とまったく同じであると考えているためです。ここに問題の簡単な例があります。

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）をレンダリングするだけです。私がそれらを切り替えようとすると、ガントチャートのみが正常に読み込まれます。

ここに、前のコードのレンダリングのイメージがあります。各チャートのプロパティをgraph_id

npm update react-google-charts 

そして、あなたは別のを使用しています

Answer 1

を使用すると、ガントチャートの種類と適切なものを持っていることを確認するために反応し、グーグル・チャートノードモジュールを更新するようにしてください：

<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>