使用 react-chartjs-2 React 动态更改类型

Question

我在我的项目中使用打字稿，我正在尝试更改图表类型，例如通过按钮。并且react-chartjs-2的官方文档将类型声明为const，所以typescript不会编译它。我应该怎么做，如果真的做不到？

我的代码：

const Stats = () => {
    const [type, setType] = useState('bar');

    const data = {
      labels,
      datasets: [
        {
            // in offical docs
            // type: 'bar' as const,
            type: type,
            label: 'Dataset 1',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2,
            fill: false,
            data: randomArray(),
        },
        {
            type: type,
            label: 'Dataset 2',
            backgroundColor: 'rgb(75, 192, 192)',
            data: randomArray(),
            borderColor: 'white',
            borderWidth: 2,
        },
        {
            type: type,
            label: 'Dataset 3',
            backgroundColor: 'rgb(53, 162, 235)',
            data: randomArray(),
        },
      ],
    };

    return (
        <div>
            <Chart type='bar' data={data} />
            <Button onClick={ () => setType('line')}>Change type</Button>
        </div>
    );
};

Answer 1

你可以这样做，从 chart.js 导入 ChartType 就像

import {ChartType} from 'chart.js'

然后把useState代码改成

const [type, setType] = useState<ChartType>('bar');

现在应该可以了

Answer 2

你可以使用 switch case

const [chartType, setChartType] = useState("Line");
...
...
return(

...

 {(() => {
    switch (chartType) {
      case "Line":
        return <Line data={gdata} options={goptions} />;
      case "Bar":
        return <Bar data={gdata} options={goptions} />;
      case "Pie":
        return <Pie data={gdata} options={goptions} />;
      case "Radar":
        return <Radar data={gdata} options={goptions} />;
      case "Scatter":
        return <Scatter data={gdata} options={goptions} />;

      default:
        return <Line data={gdata} options={goptions} />;
    }
  })()}
)

使用 react-chartjs-2 React 动态更改类型

Dynamically change type with react-chartjs-2 React

charts

reactjs

chart.js

react-chartjs

react-chartjs-2