无法渲染两个相同的 React 组件,特别是 react-google-chart

IT技术 javascript reactjs charts google-visualization
2021-05-14 11:36:00

我可以让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。如果我要切换它们,只有甘特图才能成功加载。

这是先前代码呈现的图像。 在此处输入图片说明

1个回答

尝试更新您的 react-google-charts 节点module,以确保您拥有正确的甘特图类型:

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>