如何在Highcharts JS图表的Y轴上正确设置并显示日期格式？

我来帮你搞定这个Y轴日期格式的问题，顺便也梳理下代码里的小细节~

第一步：修复Y轴的日期格式显示逻辑 #

你当前的Y轴没有声明type: 'datetime'，Highcharts默认Y轴是线性数值类型，直接用日期格式化语法自然不会生效。需要做两个关键调整：

1. 给第一个Y轴添加type: 'datetime'，明确告诉Highcharts这是时间类型的轴
2. 保留你写的格式字符串，但要确保轴类型匹配后才会生效

修改后的Y轴配置代码：

yAxis: [
    {
        type: 'datetime', // 必须添加这个配置项
        labels: {
            format: '{value:%H:%M:%S}', // 现在这个格式就能正常解析了
        }
    },{
        labels: {
            format: '{value} S',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }
],

第二步：修正数据处理的问题 #

从你的代码里能看到，你现在是把parseInt(val2)推入datas，但后面又有datase22.push(val2.timestamp)，这说明你大概率传错了数据——把非时间戳数值放到了series的data里，导致Y轴根本没拿到时间相关的数据，格式自然不对。

如果接口返回的val2.timestamp是时间戳，需要注意：Highcharts的datetime类型要求是毫秒级时间戳，如果接口返回的是秒级，记得乘以1000。修改数据处理部分：

$.each(JSON.parse(response), function (key, val) {
    $.each(val, function (key2, val2) {
        categoriess.push(parseInt(key2.toString()))
        // 替换成时间戳数据，秒级转毫秒级
        let timeValue = val2.timestamp * 1000; 
        datas.push(timeValue)
        option.series[0].data = datas;
    })
})

额外场景提示：如果是显示时长而非具体时间点 #

如果你要展示的不是某个具体时间点，而是像01:30:00这样的时长（比如总秒数转时分秒），那不需要设置type: 'datetime'，而是用格式化函数手动转换：

yAxis: [
    {
        labels: {
            formatter: function() {
                // 假设value是总秒数
                const hours = Math.floor(this.value / 3600);
                const minutes = Math.floor((this.value % 3600) / 60);
                const seconds = this.value % 60;
                // 补零保证格式统一
                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
        }
    },
    // 第二个Y轴配置不变
]

你可以根据自己的实际数据类型（具体时间戳/时长秒数）选择对应的方案~

内容的提问来源于stack exchange，提问作者yanis.samah