Chart.js使用moment适配器时hover无提示框、报错且X轴标签不显示的问题求助

咱们先拆解你遇到的两个核心问题：Tooltip触发时的TypeError和X轴时间标签无法正常显示，这俩问题其实都和时间适配器冲突、配置细节不到位有关，下面一步步来解决：

1. 修复「TypeError: Cannot read property 'format' of undefined」与Tooltip失效问题 #

你同时引入了chartjs-adapter-moment和chartjs-adapter-date-fns两个时间适配器，这会让Chart.js搞不清该用哪一个，直接导致时间格式化函数找不到，Tooltip自然也没法正常工作。

解决方案：只保留一个时间适配器
根据你的需求二选一就行，比如保留moment适配器（删掉date-fns的引入）：

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

2. 修复X轴时间标签显示问题 #

你的X轴配置有几个细节错误：

• ticks.source: "labels"：但你并没有在data里提供labels数组，应该改成"data"，让Chart.js直接从数据里读取时间值
• Chart.js v3版本里，轴的配置键是x/y，不是旧版的xAxis/yAxis，这也是你之前配置不生效的关键原因
• 时间单位unit: "day"：你的数据时间戳间隔只有几分钟，用day的话所有标签都会显示同一天，建议改成"minute"或者让Chart.js自动适配

修正后的完整图表配置代码：

var data = [{ "t": 1622287843965, "y": "35181.38" }, { "t": 1622288064247, "y": "35779.44" }, { "t": 1622288261196, "y": "35681.55" }, { "t": 1622288644294, "y": "35552.49" } ];
// 注意：把y值从字符串转为数字，避免图表渲染异常
data.forEach(item => item.y = parseFloat(item.y));

var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
 type: "line",
 data: {
 datasets: [{
 label: `Price`,
 data: data,
 backgroundColor: "rgba(134,159,152, 1)",
 borderColor: "rgba(174, 194, 194, 0.4)" // 你之前写的305超出RGB范围，这里修正为194
 }],
 },
 options: {
 parsing: {
 yAxisKey: 'y',
 xAxisKey: 't',
 },
 scales: {
 x: {
 adapters: { date: {} },
 ticks: { 
 source: "data", // 改为从数据读取时间值
 autoSkip: true, // 自动跳过重叠标签
 maxRotation: 45 // 旋转标签避免拥挤
 },
 display: true,
 type: 'time',
 time: { 
 unit: "minute", // 匹配你的数据时间间隔
 tooltipFormat: 'YYYY-MM-DD HH:mm', // 自定义Tooltip里的时间格式
 displayFormats: {
 minute: 'HH:mm' // 自定义X轴标签的时间显示格式
 }
 }
 },
 y: {
 beginAtZero: false // 避免Y轴从0开始，更贴合数据范围
 }
 },
 plugins: {
 tooltip: {
 mode: 'index',
 intersect: false // 让Tooltip在hover到X轴区域时也能触发
 }
 }
 }
});

关键配置说明 #

• 修正轴的配置键为x/y，适配Chart.js v3的语法
• 把字符串类型的y值转为数字，确保图表能正确渲染数值
• 调整时间单位和显示格式，匹配你的数据时间间隔
• 移除冲突的时间适配器后，Tooltip的格式化函数能正常工作，不会再抛出错误

现在你的图表应该能正常显示Tooltip，X轴的时间标签也会按照配置正确展示了。

内容的提问来源于stack exchange，提问作者wahab memon