修改React Google Chart中的数据

npm install react-google-charts

import React from 'react';
import { Chart } from 'react-google-charts';

const chartData = [
  ['Year', 'Sales'],
  ['2018', 1000],
  ['2019', 1500],
  ['2020', 2000],
];

render() {
  return (
    <Chart
      chartType="ColumnChart"
      data={chartData}
      width="100%"
      height="400px"
    />
  );
}

constructor(props) {
  super(props);
  this.state = {
    chartData: [
      ['Year', 'Sales'],
      ['2018', 1000],
      ['2019', 1500],
      ['2020', 2000],
    ],
  };
}

// 在某个事件处理函数中更新图表数据
handleDataUpdate = () => {
  const newChartData = [
    ['Year', 'Sales'],
    ['2018', 1200],
    ['2019', 1800],
    ['2020', 2300],
  ];
  this.setState({ chartData: newChartData });
}

render() {
  return (
    <div>
      <Chart
        chartType="ColumnChart"
        data={this.state.chartData}
        width="100%"
        height="400px"
      />
      <button onClick={this.handleDataUpdate}>更新数据</button>
    </div>
  );
}