ChartJS 3+ x 轴仅显示完整的时刻对象而不是仅显示月份

2023-12-11

我试图使用 momentjs 在图表的 x 轴上仅显示月份和年份,但它只是将看起来完整的时刻日期放在 x 轴上。

我一直在看很多人这样做的例子,但他们似乎都不能在最新版本的 Chartjs 中工作。 我知道我已经包含了与 momentjs 一起使用所需的“适配器”,但无法知道它是否正常工作。

这是我正在使用的代码的 jsfiddle,非常感谢您的帮助。https://jsfiddle.net/7z20jg68/

我也有错误告诉我Invalid scale configuration for scale: x这很令人困惑,因为我的 x 轴似乎顺序正确..谢谢!


你的X轴刻度确实无效,你将它声明为一个数组,这是V2语法,在V3中,所有刻度都是它们自己的对象,其中对象的键是scaleID。因此,删除 x 轴缩放对象周围的数组括号将解决该问题。

另外,您的图例和工具提示配置有错误且位置错误,还有 V2 语法。

对于所有更改,请阅读迁移指南

const gainedChart = document.getElementById('gained-chart').getContext('2d');

const gain = [74.699997, 76.580002, 81.349998, 83.000000, 85.879997, 83.120003, 77.989998, 81.279999];
const dates = ["Jan 2, 20", "Feb 3, 20", "Mar 4, 20", "Apr 5, 20", "May 6, 20", "Jun 9, 20", "Nov 10, 20", "Dec 11, 20"];

let gainData = {
  datasets: [{
    label: "Gain (%)",
    data: gain,
    borderColor: 'rgba(255, 66, 66, 1)',
    backgroundColor: 'rgba(255, 66, 66, 1)',
    pointRadius: 1.2,
    pointBackgroundColor: 'rgba(255, 66, 66, 0.8)',
    pointHoverRadius: 6,
    pointHitRadius: 20,
    pointBorderWidth: 2,

  }]
};
let gainConfig = {
  plugins: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        boxWidth: 80,
        color: 'black'
      },
    },
    tooltip: {
      callbacks: {
        label: function(tooltipItem, data) {
          return parseInt(tooltipItem.parsed.y)
        }
      }
    },
  },
  scales: {
    x: {
      type: 'time',
      time: {
        minUnit: 'month'
      }
    },
    y: {
      suggestedMax: 45,
      ticks: {
        stepSize: 5,
        //max: 100
      },
    },
  },
  maintainAspectRatio: false,
  responsive: true,
};
let lineGainChart = new Chart(gainedChart, {
  type: 'line',
  data: gainData,
  options: gainConfig,
  plugins: [{
    beforeInit: function(lineGainChart) {
      for (let c = 0; c < dates.length; c++) {

        let myMoment = moment(dates[c], 'MMM D, YYYY');

        lineGainChart.data.labels.push(myMoment);
      }
    }
  }]
});
<canvas class="graph-canvas" id="gained-chart" width="400" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ChartJS 3+ x 轴仅显示完整的时刻对象而不是仅显示月份 的相关文章

随机推荐

  • 为什么在innerHTML 中使用Array#map 输出中的额外逗号?

    之前的帖子已经提到了如何toString 方法将在映射的每个项目之间放置逗号 并且可以通过使用来解决这个问题join 下面 尝试 2 在显示的对象之间添加了逗号 而尝试 1 则没有 为什么是这样 如何修改尝试 2 使其输出复制尝试 1 va
  • 用户定义类型作为 PostgreSQL 函数中的输入参数

    您好 我正在创建一个用于插入元数据的过程 我创建了类型 并在另一种类型中包含了一种类型 并且在过程中我对其进行迭代以获取值 由于我是 PostgreSQL 的新手 任何人都可以帮助我如何调用该过程 输入参数为类型 Create Type F
  • Netbeans 7.1.2 - 无法添加 glassfish 服务器 3.1.2

    我从下载 glassfish 服务器http glassfish java net downloads 3 1 2 2 final html并单独安装 现在我正在尝试将其添加到 Netbeans 中 但这不起作用 我做了以下步骤 以管理员身
  • 训练神经网络时资源耗尽 - keras

    我有一个包含 65668 个文件的数据集 我使用 Keras 作为 CNN 这些是我的层 embedding layer Embedding len word index 1 EMBEDDING DIM weights embedding
  • 张量流相当于 torch.gather

    我有一个形状张量 16 4096 3 我有另一个形状索引张量 16 32768 3 我正在尝试收集价值观dim 1 这最初是在 pytorch 中使用聚集功能如下所示 a shape 16L 4096L 3L idx shape 16L 3
  • 分割十六进制的最佳方法?

    一般来说 我对十六进制还很陌生 并且我有一个应用程序需要我分割十六进制数 例如 给定数字 0x607F 我需要返回高 0x60 或低 0x7F 字节 这是可能的实现 但感觉有点麻烦 在 python 中是否有更标准的方法来做到这一点 def
  • 使用 jq 将对象的嵌套 JSON 转换为数组到 bash 数组

    我正在做一些根本错误的事情 但只是看不出是什么 有人可以指出我在 jq 或 JSON 方面的错误吗 我在数组中包含以下子对象 entries profile name TesterRun1 download entries ENTRY A
  • 使用 SIMD,如何有条件地仅移动 alpha 通道值为 255 的像素?

    我目前正在向量化一些代码以使用 AVX2 内在函数存储 32 位像素数据 由于 AVX2 寄存器是 256 位 因此我可以同时操作 8 个像素 我目前的代码可以从一个缓冲区加载 8 个像素 然后将它们存储到另一个缓冲区 Load 256 b
  • 实体框架级联删除

    首先 如果我在这里遗漏了一些基本的东西 我深表歉意 但我是 EF 的新手 并且仍然首先考虑设置数据库代码 我遇到了与此类似的问题引入 FOREIGN KEY 约束可能会导致循环或多条级联路径但似乎无法从那里的评论中找出我需要对我的特定模型做
  • 如何在awk中将驼峰式字符串拆分为数组?

    如何使用 split 函数将驼峰式字符串拆分为 awk 中的数组 Input STRING camelCasedExample 期望的结果 WORDS 1 camel WORDS 2 Cased WORDS 3 Example 糟糕的尝试
  • 实体框架代码优先迁移认为存在不应该存在的更改

    我有一个网站和一个 Windows 服务 它们都引用同一个项目来获取实体框架数据上下文 每次启动 Windows 服务时 实体框架都会运行自动迁移 将数据库列之一从 NOT NULL 更改为 NULL 不进行其他更改 该列的属性被标记为 R
  • 如何使用R中的函数替换数据框中的字符值

    我有一个数据框 max1 max2 max3 max4 max5 max6 max7 max8 max9 max10 x9 x8 x7 x6 x10 x5 x4 x2 x1 x3 x5 x3 x4 x6 x10 x1 x7 x2 x8 x9
  • Pandas:混合数据类型的列;如何找到异常情况

    我有一个很大的数据框 当阅读它时 它给了我这样的消息 DtypeWarning 列 0 8 具有混合类型 导入时指定 dtype 或设置 low memory False 它应该是一列浮标 但我怀疑里面藏着几根绳子 我想识别它们 并可能删除
  • 当CPU处于内核模式时,它可以读写任何寄存器吗?

    当CPU处于内核模式时 它可以读写任何寄存器吗 或者是否有一些寄存器即使在内核模式下也无法访问 在 x86 上 没有分组寄存器 因此所有寄存器在架构上同时可见 是的 在内核模式 环 0 下 x86 可以写入任何寄存器 只要内核运行在64位模
  • 无重叠的圆检测

    我想在以下条件下进行圆检测 重叠圆将计为 1 个圆 Particularly when I do circle detection and put the letter P to every circle actually they are
  • 如何从 Azure DB 表获取数据到 Android 应用程序?

    我是 Azure 新手 我不知道如何连接到我在 Azure 数据库上创建的表 我想获取表数据 SELECT 并将它们填充到 android 的 GridView 中 我知道使用适配器的 填充 部分 我想知道的是如何连接并接收表中的数据 我试
  • 编译器如何处理编译时分支?

    EDIT 我以 if else 情况为例 有时可以在编译时解决 例如 当涉及静态值时 参见
  • SQL - 在分组依据中使用别名

    只是对 SQL 语法感到好奇 所以如果我有 SELECT itemName as ItemName substring itemName 1 1 as FirstLetter Count itemName FROM table1 GROUP
  • JQuery ajax 文件上传到 ASP.NET 并包含所有表单数据

    我正在构建一个网站 该网站有一个职业页面 其中包含用于简历上传的输入文件 HTML 控件 使用 JQuery 将表单值 POST 到 ASPX 页面时 除了文件上传之外 一切正常 如何使用 JQuery 发布一个 AJAX 请求中的每个字段
  • ChartJS 3+ x 轴仅显示完整的时刻对象而不是仅显示月份

    我试图使用 momentjs 在图表的 x 轴上仅显示月份和年份 但它只是将看起来完整的时刻日期放在 x 轴上 我一直在看很多人这样做的例子 但他们似乎都不能在最新版本的 Chartjs 中工作 我知道我已经包含了与 momentjs 一起