如何在Highcharts datetime图表中移除特定日期（无需自定义categories）

当然可以！你完全不需要手动创建自定义categories数组来解决这个问题——Highcharts针对datetime类型的坐标轴，提供了一个非常实用的xAxis.breaks配置项，能直接帮你跳过这段无数据的时间区间，消除空白间隙。

具体实现步骤： #

1. 确定要跳过的时间范围：把10月14日0点和10月17日0点转换成Highcharts兼容的毫秒级时间戳（因为Highcharts的datetime轴使用Unix毫秒时间戳）。
2. 配置x轴的breaks选项：在xAxis的配置中添加breaks数组，每个元素是一个包含from（起始时间戳）和to（结束时间戳）的对象，告诉Highcharts跳过这段区间。

完整示例代码： #

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime',
        // 配置要跳过的无数据区间
        breaks: [{
            from: new Date('2024-10-14').getTime(), // 10月14日00:00的时间戳
            to: new Date('2024-10-17').getTime(),   // 10月17日00:00的时间戳
            // 可选：如果需要自定义断点标记样式，可以添加以下配置
            breakMarker: {
                enabled: true,
                symbol: 'slash', // 用斜线标记断点
                radius: 4
            }
        }]
    },
    series: [{
        type: 'line',
        name: '小时平均值',
        data: [
            // 9月的小时数据示例
            [new Date('2024-09-01 00:00').getTime(), 22],
            [new Date('2024-09-01 01:00').getTime(), 21],
            // ... 省略中间9月到10月13日的所有数据点
            [new Date('2024-10-13 23:00').getTime(), 25],
            // 10月17日及之后的小时数据示例
            [new Date('2024-10-17 00:00').getTime(), 23],
            [new Date('2024-10-17 01:00').getTime(), 20],
            // ... 省略后续数据点
        ]
    }]
});

额外说明： #

• 这个方案完全基于Highcharts的datetime轴原生逻辑，不需要手动维护categories数组，后续新增或调整数据时也不用修改轴的配置，只要保证数据点的时间戳正确即可。
• 如果有多个无数据的区间，只需要在breaks数组中添加多个对象，每个对象对应一个要跳过的时间范围。
• breakMarker是可选配置，如果你不想显示断点标记，直接去掉这个属性即可，Highcharts会直接把前后的数据区间衔接起来，完全看不到空白。

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