如何用Highcharts使两段不同长度的日期数据系列按相同X轴间隔叠加？

你遇到的问题核心是用了两个独立的X轴，第二个X轴会根据自身数据集的范围自动缩放，导致未完成的系列被拉伸填满整个轴。正确的做法是共用同一个X轴，并给未完成的系列补充缺失日期的null值，让两个系列的日期范围匹配，这样就能保证每个数据点按相同的日期间隔对齐。

下面是修改后的完整代码：

$(function() {
    $('#clicks').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Clicks'
        },
        yAxis: {
            title: {
                text: 'Clicks'
            },
            min: 0
        },
        // 只保留一个X轴，统一控制日期范围和间隔
        xAxis: {
            type: 'datetime',
            tickInterval: 24 * 3600 * 1000 // 改为每天一个刻度，更贴合每日数据间隔
        },
        series: [{
            name: 'Control Clicks',
            data: [
                [Date.UTC(2018, 2, 22), 2],
                [Date.UTC(2018, 2, 23), 0],
                [Date.UTC(2018, 2, 24), 0],
                [Date.UTC(2018, 2, 25), 1],
                [Date.UTC(2018, 2, 26), 1],
                [Date.UTC(2018, 2, 27), 2],
                [Date.UTC(2018, 2, 28), 0],
                [Date.UTC(2018, 2, 29), 0],
                [Date.UTC(2018, 2, 30), 1],
                [Date.UTC(2018, 2, 31), 2],
                [Date.UTC(2018, 3, 1), 0],
                [Date.UTC(2018, 3, 2), 0],
                [Date.UTC(2018, 3, 3), 0],
                [Date.UTC(2018, 3, 4), 0],
                [Date.UTC(2018, 3, 5), 2],
            ]
        }, {
            name: 'Test Clicks',
            // 补充Control Clicks对应日期的null值，让两个系列日期范围完全匹配
            data: [
                [Date.UTC(2018, 2, 22), null],
                [Date.UTC(2018, 2, 23), null],
                [Date.UTC(2018, 2, 24), null],
                [Date.UTC(2018, 2, 25), null],
                [Date.UTC(2018, 2, 26), null],
                [Date.UTC(2018, 2, 27), null],
                [Date.UTC(2018, 2, 28), null],
                [Date.UTC(2018, 2, 29), null],
                [Date.UTC(2018, 2, 30), null],
                [Date.UTC(2018, 2, 31), null],
                [Date.UTC(2018, 3, 1), null],
                [Date.UTC(2018, 3, 2), null],
                [Date.UTC(2018, 3, 3), null],
                [Date.UTC(2018, 3, 4), null],
                [Date.UTC(2018, 3, 5), null],
                [Date.UTC(2018, 3, 6), 0],
                [Date.UTC(2018, 3, 7), 0],
                [Date.UTC(2018, 3, 8), 0],
                [Date.UTC(2018, 3, 9), 2],
                [Date.UTC(2018, 3, 10), 2],
                [Date.UTC(2018, 3, 11), 0],
                [Date.UTC(2018, 3, 12), 1],
                [Date.UTC(2018, 3, 13), 1],
                [Date.UTC(2018, 3, 14), 0],
            ]
            // 移除xAxis:1配置，共用主X轴
        }]
    });
});

关键修改说明： #

• 移除第二个X轴：让两个系列共用同一个X轴，从根源上保证日期刻度的一致性。
• 补充缺失日期的null值：Highcharts会自动忽略null值，但会保留对应的X轴位置，这样Test Clicks的每个有效数据点都会和Control Clicks的日期一一对应，不会被拉伸。
• 调整tickInterval为1天：原代码的30天间隔过大，改为每天一个刻度更贴合你的每日数据场景。

这样修改后，两个系列就会按相同的日期间隔叠加显示，未完成的Test Clicks只会在已有数据的日期上显示点，其余日期自动留空，完全对齐第一个系列的时间轴。

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