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

2024-03-10

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

我的错误是

该方法未实现:要么找不到适配器,要么找不到适配器 提供了不完整的集成。

然而,纵观文档 https://www.chartjs.org/docs/latest/axes/cartesian/time.html和这个tutorial https://code.tutsplus.com/tutorials/getting-started-with-chartjs-scales--cms-28477,我仍然收到错误。

In my 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>

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

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

正如所指出的doc https://github.com/chartjs/chartjs-adapter-moment

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ChartJS 不使用 Moment.js 显示时间数据 的相关文章

随机推荐

  • 如何使用 proc Compare 更新数据集

    我想用proc compare每天更新数据集 work HAVE1 Date Key Var1 Var2 01Aug2013 K1 a 2 01Aug2013 K2 a 3 02Aug2013 K1 b 4 work HAVE2 Date
  • 致命异常:发布版本中的 java.lang.NullPointerException

    我在应用程序的发布版本中面临一个奇怪的问题 这是我的例外 Fatal Exception java lang NullPointerException throw with null exception in hopq hopq authe
  • 使用 Nokogiri 查找 id 包含 [] 的标签

    我有一个 html 元素 例如 div 我想通过 id 搜索这个元素 但 nokogiri 似乎被 搞糊涂了 我想 doc css spam eggs id 但无济于事 克里斯 试试这个 让我知道它是否有效 doc Nokogiri HTM
  • QStateMachine - QMouseEvent

    在另一个问题中 你告诉我使用 QStateMachine 我是 Qt 的新手 这是我第一次使用这些对象 所以我犯了很多逻辑错误 所以使用 QStateMachine 这是一个大问题 这是唯一的方法吗 我尝试解释一下我的程序 我想创建一个纸牌
  • Play 2.0 中的 session.id 在哪里?

    在 Play 1 0 中 我们使用 session getId 方法来检索唯一的会话标识符 id 可以方便地为全局缓存中的键添加前缀 Play 2 0 session id 等效项在哪里 由于会话数据存储为 cookie 因此 play 2
  • 使用 RLE 读取和压缩图片

    目前我正在学习 python 我想更多地了解数据压缩 所以我决定尝试编写运行长度编码 RLE 根据我的阅读 当您尝试压缩图片时它会很有用 我想知道对于初学者来说最简单的图像文件类型是什么 如何使用 python 从图片中读取像素 RGB 值
  • Android DrawBitMap 使用 ARGB_8888 时非常慢

    我发现 DrawBitMap 只绘制三个位图需要 50 60 毫秒 一个是占据整个屏幕的矩形 一个是圆形 另一个是路径 我的位图是通过在空白位图上使用 Canvas drawPath drawRect 和 drawCircle 创建的 Bi
  • gem 和/或 Ruby on Rails 突然崩溃了,有人知道发生了什么吗?

    我有一个 Ruby on Rails 应用程序 曾经可以工作 我已经有一个月左右没有使用它了 但今天尝试启动它rails s并收到以下错误 事实上 当我尝试时 我收到此错误rails h or rails v甚至gem h or sudo
  • java.lang.NoClassDefFoundError:以下 Lollipop 版本上的 com.parse.Parse$Configuration$Builder

    我在我的应用程序中使用 parse com sdk 它与 Lollipop 配合得非常好 但是当我在以下棒棒糖版本上运行该应用程序时 我收到此错误 java lang NoClassDefFoundError com parse Parse
  • EXE 或 DLL 映像基地址

    C Windows 中有没有办法获取 exe DLL 映像基地址 谢谢 如果您将二进制文件加载到您自己的进程中 您可以使用获取模块句柄 http msdn microsoft com en us library ms683199 VS 85
  • 如何在 Swift 中使用 CMAltitudeHandler?

    self altimeter startRelativeAltitudeUpdatesToQueue NSOperationQueue mainQueue withHandler CMAltitudeData altitudeData NS
  • 导入可出租运算符和可观察创建方法

    我正在升级到 Angular 5 和 RxJS 5 5 2 并尝试导入Observable of操作员 在可出租运营商之前 我们是这样做的 import rxjs add observable of Usage Observable of
  • 带表达式的 C++ 模板参数

    我在使用 C 时遇到了麻烦 我希望能够将表达式作为参数放入模板中 这是我的代码 include
  • 从 Java Web 应用程序控制 C 应用程序

    我有 C 应用程序将在不同站点的多台计算机上运行 现在我想控制和监视这些C应用程序 为此 我正在考虑使用 Servlet JSP 的 Java Web 应用程序 我认为 C 应用程序将通过 TCP 连接到 Java Web 应用程序 在我的
  • 如何使用 Wireshark 从 TCP 数据包中提取原始数据

    对 Wireshark 完全陌生 想知道如何从我在 Wireshark 上收到的 TCP 数据包中提取数据 我目前正在使用带有 Grove 传感器的树莓派并获取压力和温度值 我将这些值发送到云中的服务器并且它正在工作 我正在使用wiresh
  • 如何在javascript中打开没有任何栏(如地址栏、书签栏等)的浏览器窗口?

    我希望打开一个没有任何地址栏 书签栏的网址 html 文件 以便用户只看到应用程序窗口 有办法这样做吗 window open url window toolbar no menubar no resizable yes 您可以阅读这些以及
  • 顺序一致性和原子性有什么区别?

    我读到 java 易失性是顺序一致的 但不是原子的 对于原子性java提供了不同的库 有人可以用简单的英语解释两者之间的区别吗 我相信问题范围包括 C C 因此添加这些语言标签以获得更多受众 想象一下一个类中的这两个变量 int i 0 v
  • 为什么 GridView 内的 LinkBut​​ton 不会引发其 OnClick 事件?

    我在 GridView 中有一个 LinkBut ton 通过 TemplateField 无论我如何尝试 LinkBut ton 都不会调用其事件处理程序 我都尝试过 传统的事件处理程序 OnClick GridView 级别的 OnRo
  • 根据中心性对顶点着色

    我正在尝试更改 igraph 生成的图形中顶点的颜色 更具体地说 我有一个从邻接矩阵创建的 95 个节点图 我想根据它们的度数 介数 特征值中心性 接近度对它们进行着色 但我猜在我知道如何用它来做之后 我可以和其他人一起做 所以到目前为止我
  • ChartJS 不使用 Moment.js 显示时间数据

    我正在尝试按小时绘制给定日期的一系列数据点 并非每个小时都包含在数据集中 但我仍然想显示从 0 00 23 00 的时间并绘制可用的数据点 我的错误是 该方法未实现 要么找不到适配器 要么找不到适配器 提供了不完整的集成 然而 纵观文档 h