使用react-chatjs-2 react动态更改类型

Question

我在项目中使用typescript，并试图更改图表的类型，例如通过按钮。react-chattjs-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

您可以使用切换情况

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} />;
}
})()}
)