react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

Question

我目前正在尝试通过 react-chartjs-2 构建折线图。为此，我使用了 TypeScript。我在实施时没有收到任何错误。 webiste 呈现正常，但是当我尝试打开呈现 LineChart 的组件时，我在浏览器中收到以下错误：

我的折线图组件如下所示：

import { Line } from "react-chartjs-2";
import {ChartData, ScatterDataPoint} from "chart.js"

type LineChartProps = {
    options: object,
    data: ChartData<"line", (number | ScatterDataPoint | null)[], unknown>,
}

export default function LineChart({options, data}:LineChartProps) {
  return ( 
    <Line data={data} options={options} />
  );
}

因为我希望能够处理来自不同来源的数据，所以我的处理程序看起来像这样（到目前为止非常基本）：

import LineChart from "./LineChart";

const colors = ["#f7813e", "#547db4", "lightgreen", "lightcoral", "darkorchid"]

type LineChartHandlerProps = {
    labels: Array<string>,
    datasets:Array<Array<number>>,
    labelDatasets:Array<string>,
    title: string,
}


const LineChartHandler = ({labels, labelDatasets, datasets, title}:LineChartHandlerProps) => {
    const options = {
        plugins:{legend:{position: "bottom"}},
        layout:{padding:10},
        scales: {
          y:{
            ticks:{
              color:"#547db4",
              font:{
                size: 12
              }
            },
            grid:{
              color: "#547db4"
            }
          },
          x:{
            ticks:{
              color:"#547db4",
              font:{
                size: 12
              }
            }
          }
        },
      };       

    let data: { label: string; data: number[]; fill: boolean; borderColor: string; }[] = [];
    datasets.forEach((x,i) => {
        data.push(
          {
            label: labelDatasets[i],
            data: x,
            fill: true,
            borderColor: colors[i],
          }
        )
    })

    let dataFinal = {
        labels: labels,
        datasets: data,
    }

  return (
    <LineChart data={dataFinal} options={options} />
  )
}

export default LineChartHandler

由于折线图不需要选项我也尝试了但得到了同样的错误。我用这样的虚拟值调用我的处理程序：

              <LineChartHandler labels={["19", "20", "21", "22"]} labelDatasets={["u1", "u2"]} datasets={[[1, 3, 4, 6], [6, 8, 3.5, 5], [3.5, 5, 4, 2], [4, 2, 3, 3]]} title={"Test Line Chart"} />

似乎 chart.esm.js 中的“项目”未定义：

但我不知道为什么会这样。

感谢帮助！

Answer 1

这是因为 chart.js v3 是 treeshakable，因此您需要注册您正在使用的所有内容。在您的情况下，您没有注册 pointElement。你可以这样做：

import {Chart, PointElement} from 'chart.js';

Chart.register(PointElement);

您也可以选择只导入所有内容，这样您就不必像这样手动注册：

import 'chart.js/auto'

react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

reactjs

typescript

chart.js

react-chartjs-2