求助：在Highcharts中实现跑步配速（分:秒格式）的图表显示

嘿，作为Highcharts新手面对庞大的官方文档确实容易懵，尤其是要实现跑步配速这种特殊的时间格式显示，我来帮你搞定这个问题！

首先得指出你当前代码的核心问题：datetime类型的轴和categories是不能一起用的。datetime轴本质是基于数值（毫秒级时间戳）的轴，而categories是分类轴的配置，两者逻辑冲突，这就是你的代码无法正常运行的原因。

跑步配速是“每单位距离的耗时”，本质是一个时间长度值，咱们可以通过以下步骤来实现正确的显示：

1. 先把配速字符串转换成毫秒数 #

Highcharts的datetime轴认的是毫秒值，所以咱们写个小函数把"mm:ss"格式的配速转成毫秒：

function paceToMs(paceStr) {
  const [minutes, seconds] = paceStr.split(':').map(Number);
  return (minutes * 60 + seconds) * 1000;
}

比如paceToMs('05:30')会返回330000（5分30秒对应的毫秒数）。

2. 配置正确的Y轴 #

去掉categories，改用datetime轴的数值逻辑，同时通过labels.formatter把毫秒值再转回mm:ss的配速格式：

Highcharts.chart('container', {
  yAxis: {
    type: 'datetime',
    // 根据你的配速范围设置最小/最大值，确保轴的范围合适
    min: paceToMs('03:30'),
    max: paceToMs('08:00'),
    labels: {
      formatter: function() {
        const totalSeconds = this.value / 1000;
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = Math.floor(totalSeconds % 60);
        // 补零保证两位数格式，比如05:03而不是5:3
        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }
    },
    title: {
      text: '配速（分:秒/公里）'
    }
  },
  series: [{
    // 数据点也要用转换后的毫秒值
    data: [
      paceToMs('04:15'),
      paceToMs('05:00'),
      paceToMs('04:45'),
      paceToMs('05:30')
      // 你的其他跑步数据点
    ],
    type: 'line' // 换成你需要的图表类型，比如column、area都可以
  }],
  title: {
    text: '跑步配速统计'
  }
});

额外优化点 #

如果需要在配速后面加上“/公里”或“/英里”的后缀，直接在formatter里修改返回值就行：

return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} /公里`;

这样配置后，你的图表就能正确显示跑步配速的格式啦，数值逻辑和显示格式都能兼顾到~

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