本文介绍了如何在 Chart.js 图表中格式化 X 轴上的日期，使其仅显示年份，同时在工具提示中保留完整的日期格式。通过修改 Chart.js 的配置选项，可以自定义坐标轴刻度和工具提示的日期显示方式，从而满足不同的可视化需求。本文提供了一种使用回调函数和索引来正确格式化日期的方法，并解决了常见的问题。
使用回调函数格式化 X 轴日期
在 Chart.js 中，你可以使用 scales 选项来自定义坐标轴的显示方式。对于日期类型的 X 轴，你可能希望在坐标轴上只显示年份，而在鼠标悬停时在工具提示中显示完整的日期。以下是如何实现的步骤：
配置 scales.x.ticks.callback： callback 函数允许你自定义每个刻度的标签。在这个函数中，你可以使用 JavaScript 的 Date 对象来格式化日期。
使用数据索引获取日期： 由于回调函数的参数可能未按预期填充，一个可行的解决方案是使用刻度的索引来访问原始数据中的日期字符串。
下面是一个示例代码，展示了如何使用回调函数来格式化 X 轴日期：
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 对象，并提取年份进行显示。
工具提示的日期格式
Chart.js 默认会显示与数据点关联的完整日期。如果需要自定义工具提示的日期格式，可以考虑使用 Chart.js 的插件系统，或者在生成工具提示内容时进行自定义格式化。
注意事项
- 日期格式一致性： 确保 chartData.labels 中的日期字符串格式一致，以便 new Date() 能够正确解析。
- 时区问题： Date 对象会受到时区的影响。如果需要处理不同时区的日期，请使用相应的库，如 moment.js 或 date-fns。
- 性能考虑： 如果数据量很大，回调函数可能会影响性能。可以考虑对日期进行预处理，并将格式化后的日期存储在一个新的数组中。
总结
通过使用 scales.x.ticks.callback 选项，你可以灵活地控制 Chart.js 图表中 X 轴日期的显示格式。 结合数据索引，可以确保即使回调函数的参数未按预期填充，也能正确地格式化日期。 在实际应用中，请注意日期格式的一致性和时区问题，并根据数据量的大小进行性能优化。
