React Chart.js分组柱状图Tooltip时间显示为小数而非HH:MM:SS格式问题

问题背景 #

基于React开发的应用，使用Chart.js展示分组柱状图，将用户总工作秒数转换为小时小数（totalWorkTimeInSeconds / 3600）后渲染。鼠标悬停柱子时，Tooltip显示的是1.5、2.3这类小数格式，而非期望的HH:MM:SS格式，已配置Tooltip自定义回调但未生效。

问题原因 #

1. Tooltip回调取值错误：tooltipItem.parsed是包含x、y轴解析数据的对象，直接传入convertTimeFormat会导致函数无法处理非数值类型。
2. 缺失padZero函数：convertTimeFormat中调用了padZero来补全两位数，但该函数未定义，导致格式转换失败。
3. 可选：小时小数精度损失：将秒转成小时小数时，可能存在精度误差，直接用秒数转换更准确。

解决方案 #

方案1：修复现有逻辑 #

步骤1：补全padZero函数

在convertTimeFormat函数上方添加：

function padZero(num) {
  return num.toString().padStart(2, '0');
}

步骤2：修正Tooltip回调的数值获取

修改options中的Tooltip配置，获取parsed.y作为小时小数传入转换函数：

tooltip: {
  callbacks: {
    label: function (tooltipItem, data) {
      const username = data.datasets[tooltipItem.datasetIndex].label;
      const formattedTime = convertTimeFormat(tooltipItem.parsed.y);
      return `${username}: ${formattedTime}`;
    },
  }
}

方案2：优化为直接用秒数转换（推荐） #

该方案避免小时小数的精度损失，直接基于原始秒数转换时间格式：

步骤1：修改数据集生成逻辑，保留秒数

在DashGroupBarChart组件的datasets生成中，直接存储秒数而非小时小数：

const datasets = usernames.map(username => ({
  label: username,
  data: dates.map(date => {
    const dateEntry = barData.find(item => item.date === date);
    const userData = dateEntry ? dateEntry.data.find(item => item.username === username) : null;
    return userData ? userData.totalWorkTimeInSeconds : 0; // 保留原始秒数
  }),
  // 其他配置不变
}));

步骤2：更新convertTimeFormat函数，接收秒数

export function convertTimeFormat(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;

  return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
}

// 补全padZero函数
function padZero(num) {
  return num.toString().padStart(2, '0');
}

步骤3：调整Y轴配置（可选）

如果Y轴需要显示小时单位，修改scales.y.ticks的回调：

y: {
  ticks: {
    min: 0,
    max: 72000, // 对应20小时（20*3600=72000秒）
    maxTicksLimit: 6,
    callback: function (value) {
      const hours = Math.floor(value / 3600);
      return `${hours}h`;
    },
  },
}

步骤4：更新Tooltip回调

tooltip: {
  callbacks: {
    label: function (tooltipItem, data) {
      const username = data.datasets[tooltipItem.datasetIndex].label;
      const formattedTime = convertTimeFormat(tooltipItem.parsed.y);
      return `${username}: ${formattedTime}`;
    },
  }
}

效果验证 #

修改后，鼠标悬停柱子时，Tooltip将显示类似smith: 03:24:20的HH:MM:SS格式时间。

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