reactjs - 将图表 js 选项与 react-chartjs-2 和 typescript 一起使用

Question

我正在尝试使用带有 react-chartjs 圆环图的插件。为了使用插件 ( https://www.npmjs.com/package/@scottalan/chartjs-plugin-doughnutlabel )，我必须将选项传递给组件。但是当我尝试传递选项时，出现类型错误

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 的插件的情况下得到了相同的错误事件选项: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-chartjs-2 版本 4.0.0 和 react 版本 17.0.2。

Answer 1

原来输入错误可以通过使用 any 而不是 ChartOptions 来解决。

const options: any = {
  ...
}

正如 LeeLenalee 指出的那样，将此特定插件与 Chart.js 的 V3 一起使用也存在问题，但使用 any 可以与另一个类似的插件一起使用。