Chart.js 此方法未实现：检查是否提供了完整的日期适配器。包含 Chartjs-adapter-date-fns 错误

Question

Chart.js 时间线图不会渲染，而是在 x 轴设置为

type: time

时抛出错误，如所有文档中所述，请注意，我正在使用 4.1.2 和 react-chartjs-2

 包装器图表.js

import React from 'react';

import 'chartjs-adapter-date-fns';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  TimeScale,
} from 'chart.js';

import { Line } from 'react-chartjs-2';

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

export const Test = () => {
  const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  const options = {
    scales: {
      x: {
        type: 'time',
      },
    },
  };
  const dataset = {
    labels,
    datasets: [
      {
        label: 'Dataset 1',
        data: labels.map(() => Math.floor(Math.random() * 1000)),
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
      {
        label: 'Dataset 2',
        data: labels.map(() => Math.floor(Math.random() * 1000)),
        borderColor: 'rgb(53, 162, 235)',
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
      },
    ],
  };
  return <Line options={options} data={dataset} />;
};

但是，当选项更改为以下内容时，它会

渲染：

  const options = {
    responsive: true,
    adapters: {
      type: 'time',
    },
  }

我在文档中找不到任何地方说要使用 

adapters.time

选项。为什么这有效？我怎样才能让它按照文档中的方式工作。

Answer 1

我想知道您是否遇到了 Chart.js 的

双包危险

- 它包含单独的 CJS 和 ESM 版本，并且它具有全局状态（其日期/时间适配器的注册表），并且此注册表不似乎在其 CJS 和 ESM 版本之间共享。 因此，如果您的项目使用的是 Chart.js 的 CJS 版本，而您使用的适配器使用的是 Chart.js 的 ESM 版本（反之亦然），则事情将无法正常工作。

chartjs-adapter-date-fns 似乎正在使用 ESM 版本。 （参见

此处

。）

这个类似的问题

似乎是相关的（尽管没有确认的答案，所以我不确定这就是正在发生的事情），