如何配置Highcharts面积图不显示缺失日期时间数据？附数据说明

嘿，我来帮你搞定这个Highcharts的问题！你想要的是让面积图在遇到日期时间数据中断（比如你说的2月3日9小时数据断档）时，不填充那段缺失的区域，也就是让图表在缺口处断开，而不是强行连接起来，对吧？

下面给你两种实用的解决方案：

方法1：用gapSize自动识别缺口 #

Highcharts默认会尝试连接所有数据点，哪怕时间间隔很大。你可以在面积图的配置里设置gapSize，它的单位是毫秒，用来定义“多大的时间间隔算缺口”。当两个数据点的时间差超过这个值时，图表就会自动断开，不填充中间的面积。

比如你提到的9小时，换算成毫秒是9 * 60 * 60 * 1000 = 32400000，配置示例如下：

plotOptions: {
    area: {
        gapSize: 32400000, // 9小时对应的毫秒数
        // 其他面积图相关配置，比如填充透明度等
    }
}

记得确保你的x轴已经设置为时间类型，这样Highcharts才能正确计算时间间隔：

xAxis: {
    type: 'datetime'
}

方法2：手动插入null标记缺口 #

如果你的数据里没有自动体现出时间间隔，你可以在数据中断的位置手动插入null值，明确告诉Highcharts这里有一个缺口。比如：

data: [
    [Date.UTC(2018,1,2,13),740],
    null, // 标记此处为数据中断
    [Date.UTC(2018,1,3,22), 650] // 中断后的第一个数据点
]

这种方法需要你提前处理数据，识别出时间间隔超过阈值的位置，不过好处是灵活性更高。

完整配置示例 #

这里给你一个整合好的完整代码示例，方便你参考：

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    xAxis: {
        type: 'datetime'
    },
    plotOptions: {
        area: {
            gapSize: 32400000, // 9小时缺口阈值
            fillOpacity: 0.5 // 可选：调整面积填充透明度
        }
    },
    series: [{
        name: '你的数据系列',
        data: [
            [Date.UTC(2018,1,2,0),308.5],
            [Date.UTC(2018,1,2,1),273],
            [Date.UTC(2018,1,2,2),271],
            [Date.UTC(2018,1,2,3),304],
            [Date.UTC(2018,1,2,4),302],
            [Date.UTC(2018,1,2,5),301],
            [Date.UTC(2018,1,2,6),311.5],
            [Date.UTC(2018,1,2,7),329.5],
            [Date.UTC(2018,1,2,8),370.5],
            [Date.UTC(2018,1,2,9),533.5],
            [Date.UTC(2018,1,2,10),728],
            [Date.UTC(2018,1,2,11),739],
            [Date.UTC(2018,1,2,12),744],
            [Date.UTC(2018,1,2,13),740],
            // 这里是9小时的中断，下一个数据点直接跳转到2月3日22点
            [Date.UTC(2018,1,3,22), 650]
        ]
    }]
});

这样配置后，你的面积图就会在数据中断的地方断开，不会填充那段缺失的区域啦！

内容的提问来源于stack exchange，提问作者Kerem Arısoy