Question

我想使用选择框来更改react-google-chart的图表类型。代码如下：

const GoogleGraph = ({chartType, handleChartTypeChange}) => (
        <section>
            <Selector
                chartType={chartType}
                handleChartTypeChange={handleChartTypeChange}
            />
            <Chart
                chartType={chartType}
                data={data}
                options={options}
                graphID={chartType}
                width="100%"
                height="10em"
                chartEvents={chartEvents}
            />
        </section>
    );

更改选择框后，我将获得期望的数据，正如在调试器中看到的那样，chartType属性已从“ Bar”更改为“ Line”，但是在渲染完成后，该图表仍为条形图。我没有收到错误。

是否可以动态更新chartType？

Answer 1

如果其他所有方法都失败了，您也可以将chartType用作key，这将使React丢弃当前组件，并在chartType更改时创建一个全新的组件。

const GoogleGraph = ({ chartType, handleChartTypeChange }) => (
  <section>
    <Selector
      chartType={chartType}
      handleChartTypeChange={handleChartTypeChange}
    />
    <Chart
      key={chartType}
      chartType={chartType}
      data={data}
      options={options}
      graphID={chartType}
      width="100%"
      height="10em"
      chartEvents={chartEvents}
    />
  </section>
);

Answer 2

更新为通用HTML选择

const GoogleGraph = ({ chartType, handleChartTypeChange, data, options }) => (
	<section>
		<select value={chartType} onChange={handleChartTypeChange}>
			<option value="PieChart">PieChart</option>
			<option value="BarChart">BarChart</option>
		</select>
		<Chart
			key={chartType}
			chartType={chartType}
			width={'80vw'}
			height={'80vh'}
			loader={<div>Loading Chart</div>}
			data={data}
			options={options}
			graphID={chartType}
		/>
	</section>
);

动态更新react-google-chart类型

2 个答案: