将chart-js选项与react-chattjs-2和typescript一起使用

Question

我正在尝试使用一个带有react chartjs甜甜圈图的插件。为了使用插件(https://www.npmjs.com/package/@scottalan/chartjs插件甜甜圈标签(，我必须将选项传递给组件。但当我尝试传递选项时，我会得到一个类型错误

Type '{ doughnutlabel: { labels: { text: string; font: { size: string; family: string; style: string; weight: string; }; color: string; }[]; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.
Object literal may only specify known properties, and 'doughnutlabel' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.

我的最佳猜测是，ChartOptions是分配options的错误类型，因为我在没有尝试将插件与const options: ChartOptions = {}一起使用的情况下得到了相同的错误事件。我的完整代码如下，如有帮助，不胜感激。

import React, { useEffect, ReactNode, Component } from "react"
import { Chart, ChartOptions, registerables } from 'chart.js'
import { Doughnut } from 'react-chartjs-2';
Chart.register(...registerables);
const MyDoughnut = (props: ComponentProps) => {
const renderChart = (percents: number[]) => {
const data = {
datasets: [{
label: 'Progress',
data: percents,
backgroundColor: [
'rgb(255, 99, 132)',
'transparent',
],
hoverOffset: 4,
cutout: "75%",
radius: "100%"
}]
}
const options: ChartOptions = {
responsive: true,
legend: {
display: false,
position: 'top',
},
title: {
display: true,
fontSize: 20,
text: 'My Title'
},
plugins: {
doughnutlabel: {
labels: [
{
text: "Foo",
font: {
size: '60',
family: 'Arial, Helvetica, sans-serif',
style: 'italic',
weight: 'bold'
},
color: '#bc2c1a'
}
]
}
}
}
return <Doughnut options={options} data={data}></Doughnut>
}
const render = (): ReactNode => {
// const percents = props.args["percents"]
const percents = [76, 24];

return (
<span>
{renderChart(percents)}
</span>
)
}
return <div>{render()}</div>
};

我使用的是react-chattjs-2版本4.0.0和react版本17.0.2。

Answer 1

事实证明，使用any而不是ChartOptions可以解决键入错误。

const options: any = {
...
}

正如LeeLenalee所指出的，在Chart.js的V3中使用这个特定的插件也存在问题，但使用any与另一个类似的插件一起使用。

Answer 2

类型从chart.js 导出

import type { ChartData, ChartOptions } from 'chart.js';
interface DoughnutProps {
options: ChartOptions<'doughnut'>;
data: ChartData<'doughnut'>;
}

Answer 3

我查看了插件的源代码，看起来即使你解决了打字问题，它也不会起作用。原因是您使用的是Chart.js的V3，而该插件是为V2编写的，从未更新。它是自注册的，它以错误的方式这样做，它在错误的地方定义了默认选项(两个名称空间都不存在了(。

因此，如果你真的想使用这个插件，我建议你查看源代码并对其进行修改，使其与V3兼容，或者降级到chart.js v2，在那里没有内置键入或找到另一个插件。