Chart JS - 此方法未实现：检查是否提供了完整的日期适配器

Question

我试图让 Chart JS 使用时间轴，但我在浏览器中收到此错误：

Uncaught (in promise) Error: This method is not implemented: Check that a complete date adapter is provided.

我使用 Yarn 安装了“chart.js”、“moment.js”和“chartjs-adapter-moment”。之后我将它们导入到我的js中，如下所示：

import moment from "moment";
import { Chart } from 'chart.js';
import 'chartjs-adapter-moment';

在我的图表选项中我这样做了：

options: {
  scales: {
    x: {
      type: 'time'
    }
  }
}

但是在浏览器中，我收到此错误：

Uncaught (in promise) Error: This method is not implemented: Check that a complete date adapter is provided. 

Answer 1

我对 Chart.js 4.3、chartjs-adapter-moment 1.0.1 和 Node 20 也有同样的错误。

当我在

node_modules\chartjs-adapter-moment\package.json

中放置/更改以下行时，它就起作用了：

"type": "module",
"main": "dist/chartjs-adapter-moment.esm.js",

Answer 2

从 ChartJS v4.1.0 开始，他们已转向仅 ECMAScript 模块方法（请参阅 https://www.chartjs.org/docs/4.4.6/migration/v4-migration.html#general），这意味着使用 ChartJS v4.1.0 或更高版本时，您还必须将应用程序编译为 ECMAScript 模块。请参阅下面的链接以获取有关如何执行此操作的帮助

• https://babeljs.io/docs/babel-preset-env#modules解释了告诉babel为你的项目生成ES模块所需的配置。
• https://nodejs.org/api/packages.html#defining-module-system解释了如何在“package.json”中配置ES模块

如果您正在围绕 ChartJS 构建一个包装器库，然后使用 Webpack v5 将该包装器库导入到另一个应用程序中，那么您需要通过将

resolve.fullySpecified

设置为

false

来禁用在 ESM 模块导入中强制强制扩展的 Webpack 配置（请参阅https://webpack.js.org/configuration/module/#resolveouslyspecified了解更多详情）。