ChartJS not displaying time data using Moment.js

问题

I am trying to map out a series of data points on a given day by the hour. Not every hour is included in the data set, however I still want to show the time from 0:00 - 23:00 and plot the data points that is available.

My error is

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

However, Looking at the documentation and this tutorial, I still get the error.

In my hourlyData set, x is the hour and y is the amount.

Can anyone see what I am doing wrong?

$(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>

回答1:

You need to include Moment.js before Chart.js.

The Chart.js documentation could do a better job of highlighting this, but it is explained on the installation page:

The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include Moment.js before Chart.js for the functionality of the time axis.

回答2:

You could try to put the moment.js script above the chart.js. However here is an example of using moment.js that may help you.

https://stackoverflow.com/a/58555196/12176979

来源：https://stackoverflow.com/questions/58700638/chartjs-not-displaying-time-data-using-moment-js

标签

javascript

chart.js