Chart.js 中格式化坐标轴和工具提示中的日期-js教程-PHP中文网

Chart.js 中格式化坐标轴和工具提示中的日期

碧海醫心

发布： 2025-10-03 18:49:00

原创

315人浏览过

chart.js 中格式化坐标轴和工具提示中的日期

本文介绍了如何在 Chart.js 图表中格式化 X 轴上的日期，使其仅显示年份，同时在工具提示中保留完整的日期格式。通过修改 Chart.js 的配置选项，可以自定义坐标轴刻度和工具提示的日期显示方式，从而满足不同的可视化需求。本文提供了一种使用回调函数和索引来正确格式化日期的方法，并解决了常见的问题。

使用回调函数格式化 X 轴日期

在 Chart.js 中，你可以使用 scales 选项来自定义坐标轴的显示方式。对于日期类型的 X 轴，你可能希望在坐标轴上只显示年份，而在鼠标悬停时在工具提示中显示完整的日期。以下是如何实现的步骤：

配置 scales.x.ticks.callback： callback 函数允许你自定义每个刻度的标签。在这个函数中，你可以使用 JavaScript 的 Date 对象来格式化日期。
使用数据索引获取日期： 由于回调函数的参数可能未按预期填充，一个可行的解决方案是使用刻度的索引来访问原始数据中的日期字符串。

下面是一个示例代码，展示了如何使用回调函数来格式化 X 轴日期：

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

const options = {
  scales: {
    x: {
      ticks: {
        display: true,
        callback: function(value, index, ticks) {
          const tickDate = new Date(chartData.labels[index]);
          return tickDate.getFullYear().toString();
        }
      }
    },
    y: {
      beginAtZero: true,
      ticks: {
        display: true,
      }
    }
  }
}

登录后复制

在这个例子中，chartData.labels 包含了原始的日期字符串数组。callback 函数使用 index 参数来访问数组中的对应日期，然后将其转换为 Date 对象，并提取年份进行显示。