无法呈现两个相同的React组件，具体反应谷歌图表

问题描述：

我可以得到反应谷歌图表渲染一个单一的图表没有任何麻烦。但是，当我尝试添加另一个图表类型的第二个图表时，它无法呈现它。这是因为它认为第二种图表类型与第一种图表类型完全相同。这是一个简单的例子。无法呈现两个相同的React组件，具体反应谷歌图表

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。如果我要切换它们，只有甘特图会成功加载。

这是前面的代码呈现的图像。

看起来错误是''无效的可视化类型：Gantt'' – JordanHendrix

我没有带工作过反应，谷歌的可视化，但你肯定你已经装载甘特我你最初的'load（）'来自Google吗？ –

答

尝试更新你的反应，谷歌，图表节点模块，以确保你有适当的一个甘特图表类型：

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>

无法呈现两个相同的React组件，具体反应谷歌图表

相关推荐