Highcharts技术问题：如何让x轴仅显示小时和分钟

嘿，我来帮你排查代码里的问题！你现在的x轴既显示完整时间戳又不按预期展示小时分钟，核心原因是你同时给xAxis设置了type: 'datetime'和categories: reading_time，这两个配置是互斥的，导致Highcharts忽略了datetime轴的格式化规则，转而使用分类轴的逻辑。

具体错误点说明 #

• type: 'datetime'：告诉Highcharts这是一个时间轴，需要基于毫秒级时间戳来渲染，并且可以通过dateTimeLabelFormats配置刻度格式。
• categories: reading_time：这是给分类轴用的配置，会让x轴变成普通的分类列表，完全忽略datetime轴的所有规则，所以你的dateTimeLabelFormats根本没生效。

修复步骤 #

1. 移除categories配置：把xAxis里的categories: reading_time删掉，让Highcharts按照datetime轴的逻辑处理。
2. 确保数据绑定正确的时间戳：你的IstTemp数据需要和时间戳关联，应该用[[时间戳, 温度值], ...]的格式（比如[[1699123200000, 22], [1699123500000, 23]]），这样Highcharts才能对应到正确的时间点。
3. 完善时间格式配置：为了覆盖不同的刻度级别（比如小时、分钟），把dateTimeLabelFormats补充完整，避免某些刻度还是显示日期。
4. 可选：添加刻度间隔控制：设置tickInterval来指定刻度之间的时间间隔，比如10分钟、15分钟，让刻度显示更规整。

修正后的完整代码 #

var chartT = new Highcharts.Chart({
    chart: {
        renderTo: 'chart-temperature'
    },
    title: {
        text: 'Temperatur'
    },
    series: [{
        showInLegend: false,
        data: IstTemp // 确保这里是[[时间戳, 温度值], ...]的格式
    }],
    plotOptions: {
        line: {
            animation: false,
            dataLabels: {
                enabled: true
            }
        },
        series: {
            color: '#059e8a'
        }
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            hour: '%H:%M', // 小时级刻度也显示时分
            minute: '%H:%M' // 分钟级刻度显示时分
        },
        tickInterval: 15 * 60 * 1000 // 可选：设置15分钟为一个刻度间隔
    },
    yAxis: {
        title: {
            text: 'Temperatur (Celsius)'
        }
    },
    credits: {
        enabled: false
    }
});

额外提醒 #

如果你的reading_time是字符串格式的时间（比如"2023-11-04 14:30"），需要先把它们转换成毫秒级时间戳，再绑定到IstTemp的数据点里，比如用new Date("2023-11-04 14:30").getTime()来转换。

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