javascript - Chart.js 中具有线性时间刻度的折线图-6ren

javascript - Chart.js 中具有线性时间刻度的折线图

转载作者：行者123 更新时间：2023-12-05 00:28:15

24

4

我正在尝试使用 Chart.js 3.3.2显示一些具有等距 x 日期轴的折线图。就像他们给出的例子 here .
我无法获得此示例的简单版本(请参见下面的代码段)，因为它输出错误:

Error: This method is not implemented: Check that a complete date adapter is provided.

我没有尝试实现整个示例，因为它依赖于外部定义的函数和值。
我很久以前问过一个类似的问题( Chart.js creating a line graph using dates)，但是在那里重新阅读了答案，它在这里没有帮助我(特别是这里的大多数答案也集中在 Chart.js 2 而不是 3)。
我将非常感谢这里的任何帮助(我发现这里的文档很难理解)。

const data = {
  labels: [
    new Date(86400000), // Day 1
    new Date(2*86400000), // Day 2
    new Date(3*86400000), // Day 3
    new Date(4*86400000), // Day 4
    new Date(6*86400000), // Day 6
    new Date(7*86400000), // Day 7
    new Date(13*86400000) // Day 13
  ],
  datasets: [{
    label: 'My First dataset',
    data: [1,3,4,5,6,7,8]
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
};

let ctx = document.querySelector("canvas").getContext("2d");
let chart = new Chart(ctx,config);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
  </head>
  <body>
    <canvas></canvas>
    <script src="script.js"></script>
  </body>
</html>

最佳答案

您需要添加 3.x 迁移指南中提供的日期适配器
(在页面中搜索“可用适配器”)
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
这是一个工作示例

const data = {
  labels: [
    new Date(86400000), // Day 1
    new Date(2 * 86400000), // Day 2
    new Date(3 * 86400000), // Day 3
    new Date(4 * 86400000), // Day 4
    new Date(6 * 86400000), // Day 6
    new Date(7 * 86400000), // Day 7
    new Date(13 * 86400000), // Day 13
  ],
  datasets: [
    {
      label: "My First dataset",
      data: [1, 3, 4, 5, 6, 7, 8],
    },
  ],
};

let ctx = document.querySelector("canvas").getContext("2d");

let chart = new Chart(ctx, {
  type: "line",
  data: data,
  
  options: {
    scales: {
      x: {
        type: "time",
      }
    },
  },
});

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
    <title>repl.it</title>
  </head>
  <body>
    <canvas></canvas>
    <script src="new.ts"></script>
  </body>
</html>

关于javascript - Chart.js 中具有线性时间刻度的折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68048609/

24

4

0

文章推荐： javascript - 如何计算 RSK 上代币的总交易量？

文章推荐： amazon-ec2 - 无法使用腻子连接到亚马逊服务器

文章推荐： types - 表中的 Lua 表显示为 Nil

文章推荐： javascript - Vue.js 中的 DOM 模板到底是什么？

支持移动点的iOS库(折线图)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
【matplotlib实战】--折线图
折线图是一种用于可视化数据变化趋势的图表，它可以用于表示任何数值随着时间或类别的变化。折线图由折线段和折线交点组成，折线段表示数值随时间或类别的变化趋势，折线交点表示数据的转折点。折
typescript 折线图 d3
我是 d3 和 typescript 的新手。我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。但是，我收到了一个 typescript 错误，如下图所示: 问题是什么？
Qlikview 折线图，在时间段维度上具有多个表达式
我是 Qlikview 的新手，经过几次失败的尝试后，我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图，其中包含: 一维 - 一个月的时间段按天数分割一个表达式 - 每天创建的任
java - Android 折线图
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。这是数据库的结构: enter image description here 这是代码: public clas
sql - SSRS基于相同数据类型的多条线 - 折线图
我有一个 TSQL 查询，它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数，以提供从两个不同月份选择数据的选项，并将其显示在同一个折线图中以进行比较。我不知道如何开始
R 折线图 - 删除与数据无关的令人烦恼的零线
我有一个简单(但非常大)的数据集，其中包含从 4 月到 8 月在不同站点进行的计数。在 4 月中旬和 7 月之间，没有零计数 - 但零线从最早到最晚的日期延伸。以下是用于制作上述图表的部分数据(列
c# - 折线图 - 更改边框宽度会删除空间
我正在创建一个折线图，我想在不改变线条长度的情况下增加线条的高度或厚度。在增加宽度属性之前，它看起来像这样: 增加宽度属性后，它看起来像这样: 我只想增加 height，但是没有这样的属性，所以我尝
具有值的 JavaFX 折线图
我想在折线图的顶部显示值。我看过this answer这很有帮助，但它改变了折线图节点。我想要的是相同的想法，但不在节点上显示值，而是在它们附近(可能在它们的右侧和上方)显示值，例如:
php - MYSQL转Google图表(折线图)
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗？ $sth = mysql_query("SELECT * FROM rea
JavaFX CSS 折线图
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
python - 模式匹配或比较两个图形(折线图)
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间这两个图都是使用 python 中的 pyplot 库创
javascript - 类似谷歌的股票图表/折线图
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
ASP生成柱型体，折线图，饼图源代码
<% function table2(total,table_x,table_y,all_width,all_height,line_n
r - 根据分类变量过滤 plotly 折线图
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值，所以我不想事先过滤数据。 library(plotly) df % filter(group1=
linechart - 带有日期轴的 javafx 折线图
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
javascript - 无法将日期传递给 nivo 折线图
我正在使用 nivo 折线图，并希望将 x 轴用作时间线，最多一分钟。不幸的是，我无法呈现该图表，因为它无法正确读取日期。例如，这是我的数据的一部分: { x: "2020-04-24T13:07:
raphael - 有没有办法将网格线添加到 gRaphael 折线图？
我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？最佳答案 gRaphael 没有添加网格线的内置方法，但绘制它们非常容易
.net - 数据表中的 OpenXML 折线图
我正在生成一份报告，该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的，行数会有所不同。搜索后没有信息，这与在 .
javascript - 从未知数量的点初始化 Highcharts 折线图
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。目前，我只是尝试使用网络服务中

首页

博学

6Ren·AI

商城

javascript - Chart.js 中具有线性时间刻度的折线图