ChartJS 3.0.2 中的 TimeSeries 比例。带来错误“此方法未实现：要么找不到适配器，要么集成不完整......”

Question

我升级到最新的 Chart.JS 版本 3.0.2。我正在尝试获取要渲染的时间序列图表。这是我的配置：

{
  type: 'line',
  data: {
    datasets: [{
      data: dataForChart
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
} 

我已经像这样导入了模块：

import ChartJS from 'chart.js/auto';

我收到的错误是：

Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.

关于我可能犯的错误有什么建议吗？

这是一个存在该问题的代码沙箱：https://codesandbox.io/s/throbbing-cdn-j6q2u ?file=/src/App.js

Answer 1

您需要安装并导入一个适配器，在您的情况下它是时间序列的时刻适配器

npm install moment chartjs-adapter-moment --save

然后将其导入您的组件中： import 'chartjs-adapter-moment';

有关适配器的更多信息，请检查此

Answer 2

这个答案来得有点晚了，但对于每个在这里绊倒的人来说：你需要一个日期适配器。在这里找到完整的列表

一旦你在根目录中安装了 ie date-fns，npm install date-fns chartjs-adapter-date-fns --save你必须做两件事才能使它在你的 React 项目中工作：

1. 将其添加到文件顶部import 'chartjs-adapter-date-fns';并import { enUS } from 'date-fns/locale';
2. 在您的选项中：

options = {
  ... 
  scales: {
    x: {
      type: 'time',

      // add this: 
      adapters: { 
        date: {
          locale: enUS, 
        },
      }, 
    }
  },
  ... 
}

Answer 3

您需要一个如上所述的适配器。看这里： https: //github.com/chartjs/chartjs-adapter-date-fns#cdn

一种选择是添加以下 cdn 链接：

<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
   
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Answer 4

如您的错误和文档中所述，您需要一个适配器将日期转换为日期对象，请参阅文档： https: //www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters