Highcharts yAxis设为datetime类型为何总是从1月1日开始？

问题根源 #

Highcharts的datetime类型轴是用来处理具体日期时间点（基于Unix时间戳，即从1970年1月1日00:00:00 UTC开始的毫秒数），而非时长间隔。当你的y值为0时，对应的就是Unix时间戳的起始点——1970年1月1日，这就是轴显示1月1日的核心原因。

正确解决方案 #

既然你需要展示的是平均时长（属于时间间隔，不是具体时间点），完全不需要使用datetime类型轴。改用默认的linear类型轴，通过yAxis.labels.formatter自定义刻度标签格式，将毫秒数值转换为你需要的时分秒格式即可。这样既保留了线性轴的刻度自动计算能力，又能显示符合需求的时长文本。

修改后的代码 #

function seconds2timeRich(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + (h == 1 ? "h, " : "h ") : "";
    var mDisplay = m > 0 ? m + (m == 1 ? "m, " : "m ") : "";
    var sDisplay = s > 0 ? s + (s == 1 ? "s" : "s") : "0s";
     
    return hDisplay + mDisplay + sDisplay;
}

var options = {
    chart: {
        height:200,
        animation: true         
    },
    title: {
        text: null,
    },
    global : {
        useUTC : false
    },
    tooltip: {
        outside: true,
        shared: true,
        formatter: function() {
            var h = '0'+this.x;
            return '<b>'+h.slice(-2)+' h</b><br>Avg. time on site: '+seconds2timeRich(this.point.y/1000);
        }
    },
    xAxis: [{
        minorTickLength: 0,
        tickLength: 0,
        labels: {
            style: {
                color: 'var(--trock-gray-400)',
                fontSize:'0.6944444444rem',
                fontWeight: '500',
            }
        },
        lineWidth: 0,
        visible:true,
        type: 'category',
        crosshair: {
            width:2,
            color: "rgba(58, 125, 238, 0.1)" 
        },
    }],
    yAxis: {
        // 移除datetime类型，使用默认线性轴
        softMin: 0,
        // 设置合理刻度间隔，例：1小时（3600000毫秒）
        minTickInterval: 3600000,
        gridLineColor: 'var(--trock-gray-200)',
        labels: {
            style: {
                color: 'var(--trock-gray-400)',
                fontSize:'0.6944444444rem',
                fontWeight: '500'
            },
            // 自定义标签格式：将毫秒转成时分秒
            formatter: function() {
                return seconds2timeRich(this.value / 1000);
            }
        },
        opposite: true,
        title: null,
    },
    accessibility: {enabled: false},
    legend:false,
    credits:false,
    plotOptions: {
        area: {
            stacking: 'normal',    
            marker: {
                radius: 0,
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },
    series: [
        {
            type: 'area',
            data: [["00",0],["01",20000],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",0],["11",26548],["12",0],["13",35000],["14",0],["15",0],["16",0],["17",0],["18",0],["19",0],["20",0],["21",10000],["22",0],["23",0]],
        } 
    ]
};
var AvgChart = Highcharts.chart('container',options);

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

关键修改点 #

• 移除yAxis的type: 'datetime'，改用默认线性轴
• 添加yAxis.labels.formatter，复用你已有的seconds2timeRich函数转换时长格式
• 设置minTickInterval为合理值（如1小时），避免轴刻度过于密集

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