Chart.js绘制耗时活动排行水平条形图时X轴小时格式显示问题

参考效果 #

你不需要修改现有以秒为单位的数据源，直接通过Chart.js的刻度回调能力即可实现X轴按小时格式显示刻度，具体配置步骤如下：

• 编写秒数转小时格式的工具函数，支持自定义显示样式
• 在X轴刻度配置中添加格式化回调，将原始秒值转换为目标小时文本
• 调整刻度步长为整小时对应秒数，和示例的刻度间隔效果对齐

1. 格式转换函数 #

根据你需要的刻度显示样式选择对应函数即可：
显示Xh格式（和示例效果一致）

const formatSecToHour = (sec) => {
  const hour = sec / 3600;
  return `${Number.isInteger(hour) ? hour : hour.toFixed(1)}h`
}

显示HH:MM格式

const formatSecToHour = (sec) => {
  const hour = Math.floor(sec / 3600);
  const min = Math.floor((sec % 3600) / 60);
  return `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`
}

2. 核心配置修改 #

替换原有options里的scales配置即可，你之前写的tooltip自定义逻辑可以完全保留，不受影响：

options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        return 'Duration ' + data['datasets'][0]['time'][tooltipItem['index']];
      }
    }
  },
  scales: {
    xAxes: [{
      ticks: {
        min: 0,
        max: 36000, // 对应10小时，可根据你的实际最大耗时调整为最近的整小时秒数
        stepSize: 3600, // 每1小时显示一个刻度
        // 刻度格式化回调
        callback: function(value) {
          return formatSecToHour(value);
        }
      }
    }]
  }
}

补充说明 #

• 做Top10排名时，只需要提前把活动和对应时长按耗时降序排序，取前10项传入labels和data数组即可，图表不需要额外配置
• 如果不需要严格按整小时间隔显示刻度，可以保留原来的stepSize: 5000配置，格式化回调依然会正常把对应秒数转换为小时格式
• 你dataset里自定义的time字段可以继续用于tooltip显示精确时长，和X轴刻度格式化逻辑互不干扰

内容的提问来源于stack exchange，提问作者Júnior Lobo