本文详解如何在 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 匹配：确保
- 性能提示：若数据量极大（>1000 点），可对 callback 做防抖或缓存，避免重复计算。
通过以上方法，你不仅能正确显示 HH:mm:ss，还能确保时间逻辑严谨、兼容任意长度，并为后续扩展（如添加平均线、分段着色）打下坚实基础。
