Highcharts如何设置X轴按30分钟固定间隔显示刻度

你当前X轴使用categories字段绑定时间字符串，属于分类类目轴，轴刻度的计算单位是数据项的索引（从0开始的整数），不是时间单位，因此直接配置时间维度的tickInterval、tickPositions属性不会生效，无法实现固定30分钟间隔的刻度效果。

• 移除X轴的categories配置，将X轴类型改为时间轴（datetime类型）
• 调整数据格式，不再拆分单独的类目数组和数值数组，将每条数据处理为[时间戳, 功率值]的二维结构，供时间轴识别
• 给X轴配置tickInterval为30分钟对应的毫秒值，同时按需配置刻度标签的时间显示格式

$.ajax({
    url: "",
    type: 'GET',
    dataType:'json',
    success: function(data) {
        var chartSeriesData = [];
        $.each(data, function(i,item){
            // 把接口返回的时间字符串转成时间戳，和功率值组成配对数组
            const timeStamp = new Date(item.time).getTime();
            chartSeriesData.push([timeStamp, item.power]);
        });

        Highcharts.chart('power', {
            title: {text: ''},
            subtitle: {text: ''},
            yAxis: {
                title: {text: ''}
            },
            xAxis: {
                type: 'datetime', // 核心配置：指定X轴为时间类型
                title: {
                    text: ''
                },
                // 30分钟对应的毫秒值：30*60*1000=1800000
                tickInterval: 1800000,
                labels: {
                    enabled: true,
                    format: '{value:%H:%M}' // 按「小时:分钟」格式显示刻度，匹配参考图样式
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                  label: {
                    connectorAllowed: false
                  }
                }
            },
            series: [
                {
                    data: chartSeriesData
                }
            ]
            // 其余原有业务配置保持不变
        })
    }
})

注意：如果接口返回的时间字符串是UTC格式，可根据业务所在时区增减对应时间偏移量，保证刻度时间展示准确。

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