如何让Highcharts的x轴根据缩放级别动态显示日期时间？

要实现X轴根据缩放级别动态显示年份、年月、日期时间的效果，需修正以下关键问题：

• 将日期字符串转换为时间戳：Highcharts的datetime类型轴需要数值型时间戳（毫秒），而非字符串类别
• 移除categories配置：使用datetime轴时无需设置categories，Highcharts会自动根据时间戳计算刻度
• 配置dateTimeLabelFormats：定义不同时间范围下的X轴标签格式，实现缩放时的动态切换
• 重构series数据：将Y值与对应时间戳配对，形成二维数组

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Dynamic xAxis</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
    <div id="container" style="width:100%; height:400px;"></div>
    <script>
        // 原始日期数据
        var xAxisData = [
            "07/12/2016 12:00:00 am",
            "07/12/2016 01:00:00 am",
            "07/12/2016 02:00:00 am",
            "07/12/2016 03:00:00 am",
            "07/12/2016 04:00:00 am",
            "07/12/2016 12:00:00 pm",
            "07/12/2016 01:00:00 pm",
            "07/12/2016 02:00:00 pm",
            "07/12/2016 03:00:00 pm",
            "07/12/2016 11:00:00 pm",
            "08/12/2016 05:00:00 am",
            "08/12/2016 06:00:00 am",
            "08/12/2016 07:00:00 am",
            "08/12/2016 09:00:00 am",
            "08/12/2016 10:00:00 am",
            "08/12/2016 10:00:00 am",
            "08/12/2016 12:00:00 pm",
            "08/12/2016 03:34:29 pm",
            "08/12/2016 04:00:00 pm",
            "08/12/2016 05:00:00 pm",
            "08/12/2016 06:34:29 pm",
            "08/12/2016 07:34:29 pm",
            "08/12/2016 08:34:29 pm",
            "08/12/2016 10:00:00 pm",
            "08/12/2016 11:00:00 pm",
            "09/12/2016 12:00:00 am",
            "09/12/2016 01:00:00 am",
            "09/12/2016 02:00:00 am",
            "09/12/2016 03:00:00 am",
            "09/12/2016 04:00:00 am",
            "09/12/2016 12:00:00 pm",
            "09/12/2016 01:00:00 pm",
            "09/12/2016 02:00:00 pm",
            "09/12/2016 03:00:00 pm",
            "09/12/2016 11:00:00 pm",
            "10/12/2016 12:00:00 am",
            "10/12/2016 01:00:00 am",
            "10/12/2016 02:00:00 am",
            "10/12/2016 03:00:00 am",
            "10/12/2016 04:00:00 am",
            "10/12/2016 12:00:00 pm",
            "10/12/2016 01:00:00 pm",
            "10/12/2016 02:00:00 pm",
            "10/12/2016 03:00:00 pm",
            "10/12/2016 11:00:00 pm"
        ];

        var tabY = [
            39966.31,
            38054.98,
            43569.27,
            43619.26,
            43735.39,
            43619.26,
            39895.25,
            39966.31,
            43201.27,
            40043.66,
            40071.34,
            38794.64,
            39480.24,
            40869.52,
            43735.39,
            43582.69,
            43735.39,
            43692.54,
            60093.51,
            43201.27,
            40093.51,
            42580.97,
            43619.26,
            38556.31,
            40043.66,
            39000.49,
            39966.31,
            43201.27,
            38865.23,
            42093.24,
            40071.34,
            43637.56,
            38996.11,
            40071.34,
            42093.24,
            40014.85,
            43576.01,
            40093.51,
            43201.27,
            38865.23,
            39966.31,
            38794.64,
            39895.25,
            40093.51,
            40043.66
        ];

        // 将日期字符串转换为时间戳（处理MM/DD/YYYY格式及AM/PM）
        var timestamps = xAxisData.map(dateStr => {
            const [datePart, timePart, period] = dateStr.split(' ');
            const [month, day, year] = datePart.split('/').map(Number);
            let [hours, minutes, seconds] = timePart.split(':').map(Number);
            
            // 转换12小时制为24小时制
            if (period === 'pm' && hours !== 12) hours += 12;
            if (period === 'am' && hours === 12) hours = 0;
            
            return new Date(year, month - 1, day, hours, minutes, seconds).getTime();
        });

        // 组合成series需要的[时间戳, Y值]格式
        var seriesData = timestamps.map((ts, index) => [ts, tabY[index]]);

        Highcharts.chart('container', {
            exporting: {
                buttons: {
                    contextButton: {
                        menuItems: ["downloadPNG", "downloadPDF"]
                    }
                },
                sourceWidth: 1502,
                scale: 1,
                chartOptions: {
                    chart: {
                        height: this.chartHeight
                    }
                }
            },
            chart: {
                zoomType: 'x',
                type: 'column'
            },
            title: {
                text: 'Relevé de prélèvement des températures et de la Salinité',
                align: 'left'
            },
            subtitle: {
                text: "Site : " + (data?.nom || "") + " du " + (data?.DisplayStartDate || "") + " au " + (data?.DisplayEndDate || "") + " (inclus)",
                align: 'left'
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: "Date (Heure, GMT +03:00)"
                },
                // 配置不同缩放级别下的日期显示格式
                dateTimeLabelFormats: {
                    year: '%Y',
                    month: '%Y-%m',
                    day: '%Y-%m-%d',
                    hour: '%H:%M',
                    minute: '%H:%M'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: (selectedValues?.[0] === "1" ? "Conductivite" : "Temperature"),
                    style: { color: "#B5C0D0" }
                }
            },
            tooltip: {
                valueSuffix: (selectedValues?.[0] === "1" ? " µS/cm" : " °C"),
                xDateFormat: '%e %b %Y, %H:%M'
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 80,
                verticalAlign: 'top',
                y: 55,
                floating: true,
                backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'rgba(255,255,255,0.25)'
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Conductivite',
                data: seriesData
            }]
        });
    </script>
</body>
</html>

关键说明 #

1. 日期转换：针对MM/DD/YYYY格式的日期字符串，手动拆分并转换为Date对象，同时处理12小时制到24小时制的转换
2. 动态格式配置：dateTimeLabelFormats定义了不同时间范围对应的显示格式，Highcharts会根据当前缩放级别自动匹配
3. 数据结构：使用[时间戳, Y值]的二维数组是datetime轴的标准数据格式，确保数据与X轴正确关联

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