Chart.js折线图Y轴如何设置为HH:mm:ss时间格式显示？

核心是在Y轴的刻度回调函数中，将原始秒数值转换为HH:mm:ss格式。以下是具体实现步骤：

1. 编写秒转HH:mm:ss的工具函数

function formatSecondsToHMS(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;
  
  // 补零确保两位格式
  const formattedHours = String(hours).padStart(2, '0');
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(remainingSeconds).padStart(2, '0');
  
  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

2. 在Chart.js配置中配置Y轴回调
   在图表的options.scales.y.ticks中设置callback，调用工具函数转换刻度值：

const chart = new Chart(document.getElementById('yourChartId'), {
  type: 'line',
  data: {
    labels: ['跑步1', '跑步2', '跑步3'], // 你的X轴标签
    datasets: [{
      label: '跑步时长',
      data: [1200, 1800, 2500], // 已转换好的秒数组
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          // 关键：将每个刻度值转为HH:mm:ss格式
          callback: function(value) {
            return formatSecondsToHMS(value);
          }
        },
        title: {
          display: true,
          text: '跑步时长'
        }
      }
    }
  }
});

额外说明 #

• 如果秒数包含小数（比如精确到毫秒），可以先对value取整再转换：formatSecondsToHMS(Math.floor(value))
• 若不需要强制显示两位小时（比如小于1小时时只显示mm:ss），可修改工具函数，根据小时是否为0调整输出逻辑。

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