react-chartjs-2 时间适配器，“时间”不是注册比例

Question

我试图将时间适配器导入我的 ReactJS 项目，但看起来它不起作用。 我无法将 Chart.js 配置为与“chartjs-adapter-date-fns”一起使用。 我的代码如下。

我像这样导入它们：

import {
  Chart as ChartJS,
  LinearScale,
  PointElement,
  Tooltip,
  Legend,
} from "chart.js";
import "chartjs-adapter-date-fns";
import { Bubble } from "react-chartjs-2";

ChartJS.register(LinearScale, PointElement, Tooltip, Legend);

图表的配置：

  const data = {
    datasets: [
      {
        label: "TheDataset1",
        data: theDataArray1,
        backgroundColor: "#782D2D",
      },
    ],

const options = {
    scales: {
      x: {
        type: "time",
      },
      y: {
        beginAtZero: true,
      },
    },
  };

这就是我部署到 ReactDOM 的方式：

<Bubble options={options} data={data} />

当我从选项中删除时间类型时，错误消失了，我在 X 轴上看到了毫秒纪元。 当我添加时间类型console.log 时会出现此错误，并且我的内容不会自行呈现。

>Error 1:
Uncaught Error: "time" is not a registered scale.

>Error2:
he above error occurred in the <ForwardRef(ChartComponent)> component:

>Error3:
Uncaught Error: "time" is not a registered scale.

Answer 1

修复了从 Chart.js 模块导入“TimeScale”的问题。 然后将 TimeScale 参数添加到 Chart.register function。 在最后：

import {Chart, LinearScale, PointElement, Tooltip, Legend, TimeScale} from "chart.js"; 

ChartJS.register(LinearScale, PointElement, Tooltip, Legend, TimeScale); 

这些解决了一切。