Chart.js 垂直轴显示 HH:mm:ss 时间格式的完整实现指南

本文详解如何在 Chart.js（v2.x）中将纵轴数值（如运行时长）从秒数自动格式化为可读性强的 HH:mm:ss 时间字符串，涵盖数据转换、刻度回调配置及常见错误规避。

本文详解如何在 chart.js（v2.x）中将纵轴数值（如运行时长）从秒数自动格式化为可读性强的 `hh:mm:ss` 时间字符串，涵盖数据转换、刻度回调配置及常见错误规避。

在使用 Chart.js 绘制时间类指标（例如每次跑步耗时）时，原始数据常以 “HH:mm:ss” 字符串形式存储。但 Chart.js 的数值型坐标轴（如 yAxes）仅接受数字，因此需先将时间字符串统一转为总秒数进行计算与排序；而最终展示给用户时，又必须还原为人类可读的 HH:mm:ss 格式——这正是本教程要解决的核心问题。

✅ 正确实现步骤

1. 数据预处理：字符串 → 秒数

将 “00:21:30” 等格式解析为整数秒，便于 Chart.js 内部运算：

const arrtempi = ["00:21:30", "01:33:40", "00:00:16", /* ... */]; const arrtempiSec = arrtempi.map(timeStr => {   const [h, m, s] = timeStr.split(':').map(Number);   return h * 3600 + m * 60 + s; });

⚠️ 注意：确保输入格式严格为 HH:mm:ss（两位小时/分钟/秒），否则 split(‘:’) 可能越界。生产环境建议增加校验逻辑。

2. 配置纵轴刻度回调（关键！）

Chart.js v2.x 中，ticks.callback 是唯一支持动态格式化纵轴标签的入口。它接收三个参数：value（原始数值）、index、values，返回渲染文本：

options: {   scales: {     yAxes: [{       ticks: {         // ✅ 正确：传入函数引用         callback: function(value) {           // 将秒数转为 HH:mm:ss（支持 >24h，如 25:30:15）           const date = new Date(value * 1000);           const hours = Math.floor(value / 3600);           const minutes = Math.floor((value % 3600) / 60);           const seconds = value % 60;           return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;         }       }     }]   } }

? 为什么不用 toISOString().substr(11, 8)？
虽然 new Date(seconds * 1000).toISOString().substr(11, 8) 在秒数 手动计算 hours/minutes/seconds 更健壮、无歧义。

3. 完整初始化示例

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <canvas id="idgTempoSforzo" height="300"></canvas>

function mostraGrafico() {   const arrtempi = ["00:21:30","01:33:40","00:00:16","00:24:30","00:23:30","00:00:20","00:01:00","00:01:00","00:00:17","00:00:17","00:00:14","00:00:14","00:00:14","00:00:10","00:00:16","00:00:17","00:00:19","00:00:18","00:35:20","00:35:20"];   const arrDate = ["2023-06-13","2023-04-29","2023-06-13","2023-07-03","2023-07-11","2023-07-12","2023-07-27","2023-07-27","2023-07-27","2023-07-27","2023-07-28","2023-07-28","2023-07-28","2023-07-27","2023-07-20","2023-07-28","2023-07-28","2023-07-20","2023-08-08","2023-08-08"];    const dataInSeconds = arrtempi.map(t => {     const [h, m, s] = t.split(':').map(Number);     return h * 3600 + m * 60 + s;   });    new Chart(document.getElementById('idgTempoSforzo'), {     type: 'line',     data: {       labels: arrDate,       datasets: [{         data: dataInSeconds,         borderColor: '#28a745',         fill: false,         pointRadius: 4,         tension: 0.2       }]     },     options: {       responsive: true,       maintainAspectRatio: false,       legend: { display: false },       scales: {         yAxes: [{           ticks: {             beginAtZero: true,             callback: (value) => {               const h = Math.floor(value / 3600);               const m = Math.floor((value % 3600) / 60);               const s = value % 60;               return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;             }           },           scaleLabel: {             display: true,             labelString: '完成时间'           }         }],         xAxes: [{           scaleLabel: {             display: true,             labelString: '日期'           }         }]       }     }   }); }  // 页面加载后执行 document.addEventListener('DOMContentLoaded', mostraGrafico);

? 关键注意事项

• 不要误用 callback: arrtempi：原代码中将数组直接赋给 callback 属于典型错误——callback 必须是函数，否则纵轴将显示 [Object Object] 或报错。
• yAxes（非 y）：Chart.js v2.x 使用 yAxes: [{ … }] 数组结构配置 Y 轴；v3+ 才改用 y: { … }，版本混淆是常见调试障碍。
• ID 匹配：确保 与 JS 中 getElementById(‘idgTempoSforzo’) 一致（原文中 idgTempoSforzo 未加引号，易引发 ReferenceError）。
• 性能提示：若数据量极大（>1000 点），可对 callback 做防抖或缓存，避免重复计算。

通过以上方法，你不仅能正确显示 HH:mm:ss，还能确保时间逻辑严谨、兼容任意长度，并为后续扩展（如添加平均线、分段着色）打下坚实基础。