Chart.js仅显示数据集中间两个数据点，求问题原因及解决方法

核心问题 #

Chart.js 无法识别你 lap_ave 数组里的时间格式字符串，且数据格式混乱：

• 存在多种不规范格式：1:02、00:58、1.01（用点代替冒号）、01:03.1000（带毫秒）
• Chart.js 仅支持数值型数据绘图，这些字符串无法被正确解析为有效数值，导致大部分数据点被判定为无效，仅少数格式特殊的条目被误解析后显示。
• 同时 y 轴设置了 beginAtZero: true，实际数据集中在57-64秒区间，从0开始的轴会把有效数据压缩到顶部，进一步加剧显示异常。

解决步骤 #

1. 统一转换时间格式为数值
   编写函数将所有时间字符串转换为总秒数（含毫秒的保留小数），让Chart.js能识别：

   function timeToSeconds(timeStr) {
     // 替换点为冒号，统一格式
     timeStr = timeStr.replace('.', ':');
     // 拆分分钟、秒、毫秒
     const parts = timeStr.split(':');
     let minutes = parseInt(parts[0]) || 0;
     let seconds = 0;
     if (parts.length > 1) {
       const secParts = parts[1].split('.');
       seconds = parseInt(secParts[0]) || 0;
       // 处理毫秒部分
       if (secParts.length > 1) {
         seconds += parseFloat('0.' + secParts[1]);
       }
     }
     return minutes * 60 + seconds;
   }
   
   // 转换lap_ave数组为数值数组
   var lap_ave_num = lap_ave.map(timeToSeconds);
   

2. 修正图表配置

   • 替换数据集的data为转换后的数值数组
   • 取消y轴从0开始的设置，或设置合理最小值，让数据区间正常显示；同时添加回调函数，把y轴标签还原为时间格式：

   options: {
     scales: {
       yAxes: [{
         ticks: {
           min: 55, // 设置最小值匹配数据区间
           callback: function(value) {
             const minutes = Math.floor(value / 60);
             const seconds = value % 60;
             return `${minutes}:${seconds.toFixed(2).padStart(5, '0')}`;
           }
         }
       }],
       xAxes: [{
         display: false
       }],
     }
   }
   

3. 完整修正代码

   var dates = ["10/21/22", "10/24/22", "10/27/22", "10/28/22", "10/31/22", "11/03/22", "11/14/22", "11/26/22", "11/26/22", "11/28/22", "11/28/22", "11/30/22", "12/01/22", "12/02/22", "12/06/22", "12/07/22", "12/08/22", "12/09/22", "12/12/22", "12/13/22", "12/16/22", "12/21/22", "12/28/22", "01/10/23", "01/12/23", "01/13/23", "01/16/23", "01/17/23", "01/19/23", "01/21/23", "01/24/23", "01/26/23", "01/30/23", "02/04/23", "02/06/23", "02/08/23", "02/09/23", "02/14/23", "02/10/23", "02/13/23", "02/15/23", "02/16/23", "02/17/23", "02/21/23", "02/24/23", "02/27/23"];
   var lap_ave = ["1:02", "1:04", "1:00", "1:01", "1:02", "1:01", "1:03", "1:03", "1:03", "0:59", "0:59", "1:01", "1:02", "1:01", "1:00", "1:00", "1:00", "1:00", "0:59", "00:58", "01:02", "01:04", "01:00", "01:02", "1.01", "1.04", "01:03.1000", "01:00.2188", "01:01.5862", "01:01.4516", "00:57.8621", "01:00.6129", "01:01.1290", "01:00.6563", "01:00.5000", "01:00.0909", "00:59.0294", "00:59.0294", "00:59.7059", "00:59.0000", "00:59.7000", "00:59.6757", "00:58.3125", "00:59.4118", "00:58.8056", "00:58.9459"]; 
   
   // 时间转秒数函数
   function timeToSeconds(timeStr) {
     timeStr = timeStr.replace('.', ':');
     const parts = timeStr.split(':');
     let minutes = parseInt(parts[0]) || 0;
     let seconds = 0;
     if (parts.length > 1) {
       const secParts = parts[1].split('.');
       seconds = parseInt(secParts[0]) || 0;
       if (secParts.length > 1) {
         seconds += parseFloat('0.' + secParts[1]);
       }
     }
     return minutes * 60 + seconds;
   }
   
   var lap_ave_num = lap_ave.map(timeToSeconds);
   
   var options = {
     type: 'line',
     data: {
       labels: dates,
       datasets: [
           {
             label: 'Lap Average',
             data: lap_ave_num,
             borderWidth: 1
           },  
           ]
     },
     options: {
       scales: {
           yAxes: [{
             ticks: {
               min: 55,
               callback: function(value) {
                 const minutes = Math.floor(value / 60);
                 const seconds = value % 60;
                 return `${minutes}:${seconds.toFixed(2).padStart(5, '0')}`;
               }
             }
           }],
           xAxes: [{
             display: false
           }],
       }
     }
   }
   
   var ctx = document.getElementById('theChart').getContext('2d');
   new Chart(ctx, options);
   

修改后所有数据点会被正确解析并显示，y轴标签也会还原为易读的时间格式。

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