当前位置：首页 > 文章列表 > 文章 > 前端 > Chart.js 实现 HH:mm:ss 时间轴完整教程

Chart.js 实现 HH:mm:ss 时间轴完整教程

2026-03-04 10:12:54 0浏览收藏

本文手把手教你如何在 Chart.js v2.x 中优雅实现纵轴时间显示——将原始的秒数自动格式化为清晰易读的 HH:mm:ss 字符串，涵盖从时间字符串预处理、秒数转换、刻度回调函数编写到配置项细节的完整链路，并重点规避了类型转换陷阱、版本兼容性问题和常见配置错误，让你轻松打造专业级时间类数据可视化图表。

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 格式。关键在于正确配置 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，兼顾精度与可读性。

本篇关于《Chart.js 实现 HH:mm:ss 时间轴完整教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！