使用带有 react-chartjs-2 和 typescript 的图表 js 选项答案

【问题标题】：Using chart js options with react-chartjs-2 and typescript使用带有 react-chartjs-2 和 typescript 的图表 js 选项
【发布时间】：2021-11-29 17:05:40
【问题描述】：

我正在尝试使用带有 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 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-chartjs-2 版本 4.0.0 和 react 版本 17.0.2。

【问题讨论】：

标签： reactjs typescript chart.js react-chartjs

【解决方案1】：

我查看了插件的源代码，似乎即使您解决了打字问题，它也不起作用。原因是您使用的是 Chart.js 的 V3，而该插件是为 V2 编写的并且从未更新。它是自我注册的，并且以错误的方式执行此操作，它在错误的位置定义了其默认选项（两个命名空间都不再存在）。

所以如果你真的想使用这个插件，我建议你看看源代码并修改它，以便它与 V3 一起使用或降级到没有构建输入的 chart.js v2 或找到另一个插件。

【讨论】：

【解决方案2】：

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

const options: any = {
  ...
}

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

【讨论】：