本文详解如何在 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 格式。关键在于正确配置 ticks.callback 函数，并确保 Chart.js 版本兼容性与选项结构准确。
✅ 正确实现步骤
1. 数据预处理：字符串 → 秒数
将 ["00:21:30", "01:33:40", ...] 转换为整型秒数组，供图表内部运算使用：
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;
});⚠️ 注意：务必使用 map(Number) 确保字符串转为数字，避免隐式类型转换错误（如 "00" 被当作八进制解析）。
2. 定义格式化回调函数
该函数接收 Chart.js 传入的刻度值（单位：秒），返回对应 HH:mm:ss 字符串。推荐使用 new Date(milliseconds).toISOString() 方案，简洁且天然支持补零：
function formatSeconds(seconds) {
// 将秒数转为毫秒，构造 Date 对象，截取 ISO 时间字符串的时分秒部分
return new Date(seconds * 1000).toISOString().substr(11, 8);
}
// 示例：formatSeconds(3660) → "01:01:00"✅ 优势：自动处理 00:01:05、25:30:12 等任意长度，无需手动计算小时/分钟进位。
3. 配置 Chart.js 选项（v2.x 关键点）
- 使用 scales.yAxes[0].ticks.callback 指定格式化函数；
- 禁用 y1 等无效配置项（原代码中 y1 未启用且结构错误）；
- labels 不应重复定义在 data 内部（已由 data.labels 提供）；
- 确保
完整初始化代码如下：
new Chart(document.getElementById('idgTempoSforzo'), {
type: 'line',
data: {
labels: arrDate, // 日期作为横轴标签
datasets: [{
data: arrtempiSec,
borderColor: 'green',
fill: false,
pointRadius: 4,
label: '单次耗时'
}]
},
options: {
responsive: true,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
callback: formatSeconds, // ← 核心：纵轴刻度格式化
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: '耗时 (HH:mm:ss)'
}
}]
}
}
});? 注意事项与最佳实践
- 版本兼容性：上述写法适用于 Chart.js v2.7+（推荐 v2.9.4）。v3+ 中 yAxes 已改为 y，且 callback 移至 ticks.format 或自定义 adapter，需另行适配。
- 性能考量：formatSeconds 是纯函数，无副作用，可安全用于高频渲染场景。
- 边界情况处理：若数据含 00:00:00，formatSeconds(0) 返回 "00:00:00"，符合预期；超 24 小时（如 25:30:12）也正确显示（new Date 支持累计毫秒）。
- 调试技巧：在 callback 中添加 console.log(seconds) 可验证传入值是否为预期秒数，快速定位数据映射问题。
通过以上三步，你即可在 Chart.js 中优雅地展示专业级时间轴图表——数值计算用秒，用户阅读用 HH:mm:ss，兼顾精度与可读性。
