javascript - ChartJS 不使用 Moment.js 显示时间数据

Question

我正在尝试按小时绘制给定日期的一系列数据点。并非每个小时都包含在数据集中，但我仍然想显示从 0:00 - 23:00 的时间并绘制可用的数据点。

我的错误是

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

但是，看看 documentation还有这个tutorial ，我仍然收到错误。

在我的 hourlyData 集中，x 是小时，y 是金额。

有人能看出我做错了什么吗？

$(document).ready(function() {
  var ctx = document.getElementById('chart_hourlycalls').getContext('2d');
  var hourlyData = [{
    "x": "1",
    "y": "1"
  }, {
    "x": "3",
    "y": "2"
  }, {
    "x": "5",
    "y": "1"
  }, {
    "x": "6",
    "y": "13"
  }, {
    "x": "7",
    "y": "13"
  }, {
    "x": "8",
    "y": "5"
  }, {
    "x": "9",
    "y": "9"
  }, {
    "x": "10",
    "y": "14"
  }, {
    "x": "11",
    "y": "24"
  }, {
    "x": "12",
    "y": "5"
  }];

  var labels = hourlyData.map(e => moment(e.x, 'HH'));
  var data = hourlyData.map(e => e.y);

  var options = {
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Calls'
        },
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'HH a'
          }
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Hour'
        }
      }]
    },
    tooltips: {
      enabled: true
    },
  };

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      data: data
    },
    options: options
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<canvas id="chart_hourlycalls"></canvas>

Answer 1

我通过添加解决了这个问题:

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

正如 doc 所指出的