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

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

我的错误是

  

此方法未实现:找不到适配器或   提供了不完整的集成。

但是,看着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",{
    "x": "6","y": "13"
  },{
    "x": "7",{
    "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,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>

wanganqideming 回答:ChartJS不使用Moment.js显示时间数据

我通过添加:

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

正如 doc

所指出的 ,

您需要在Chart.js之前 包含Moment.js。

Chart.js文档可以更好地突出显示此内容,但在installation page中对此进行了解释:

  

独立版本包括Chart.js以及颜色解析库。如果使用此版本,则必须 在Chart.js之前包含Moment.js ,以获取时间轴的功能。

,

您可以尝试将moment.js脚本放在chart.js上方。但是,这里有一个使用moment.js的示例,它可能会对您有所帮助。

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

本文链接:https://www.f2er.com/3163908.html

大家都在问