Chart.js如何处理图表日期数据间隙 实现年份顺序连续展示

当前代码不生效的核心原因是混用了Chart.js v2和v3+的配置语法：v3及以上版本已经废弃了在scale配置下嵌套xAxes/yAxes数组的旧写法，直接在对应轴的配置项上声明类型即可。
以下是两种可直接落地的实现方案： #

方案1：使用时间轴（推荐，无需手动补全数据） #

Chart.js的时间轴不内置日期解析能力，需要先引入对应日期适配器：

• npm 环境：执行安装命令 npm install chartjs-adapter-date-fns date-fns，之后在业务代码中引入即可
• CDN 环境：在引入Chart.js的脚本标签后，追加引入对应版本的chartjs-adapter-date-fns适配器脚本即可

引入完成后，按如下方式修正配置：

const ctx = canvas.getContext("2d");
const myChart = new Chart(ctx, {
    type: "line",
    data: {
        // 注意：使用时间轴时不需要单独传labels数组，数据改为{x: 日期/时间戳, y: 数值}格式
        datasets: [{
            label: "Country Population",
            // 数据示例：[{x: new Date(1909, 0, 1), y: 1200000}, {x: new Date(1960, 0, 1), y: 6500000}, ...]
            data: data,
            spanGaps: true, // 跨空值连线，不会因为无数据断开折线
            tension: 0.1
        }]
    },
    options: {
        scales: {
            x: {
                type: 'time', // 直接在x轴配置下声明类型为time，不要嵌套旧版xAxes数组
                time: {
                    unit: 'year',
                    stepSize: 10 // 可选：设置刻度间隔为10年，避免横轴刻度过密
                },
                title: {
                    display: true,
                    text: "Year"
                }
            },
            y: {
                title: {
                    display: true,
                    text: "Population"
                }
            }
        }
    }
});

配置完成后时间轴会自动按时间跨度排布，1909到1960年的空白区间会自动留出对应长度的横轴空间，不会把两个不相邻的数据点紧挨在一起。 #

方案2：手动补全连续年份数据（无额外依赖） #

如果不想引入额外的日期适配器，可以手动生成从最小年份到最大年份的全量连续标签，无数据的年份填充null即可：

// 原始离散数据
const rawData = [
    {year: 1909, pop: 1200000},
    {year: 1960, pop: 6500000},
    {year: 1980, pop: 9800000},
    // 其余原始数据
]
// 计算年份范围
const minYear = Math.min(...rawData.map(item => item.year));
const maxYear = Math.max(...rawData.map(item => item.year));
// 生成连续标签和对应数据
const fullLabels = [];
const fullPopData = [];
for (let y = minYear; y <= maxYear; y++) {
    fullLabels.push(y);
    const target = rawData.find(item => item.year === y);
    fullPopData.push(target ? target.pop : null);
}
// 初始化图表，使用普通类目轴即可
const myChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: fullLabels,
        datasets: [{
            label: "Country Population",
            data: fullPopData,
            spanGaps: true
        }]
    },
    options: {
        scales: {
            x: {
                title: {
                    display: true,
                    text: "Year"
                }
            },
            y: {
                title: {
                    display: true,
                    text: "Population"
                }
            }
        }
    }
});

两种方案最终效果一致，都可以实现横轴年份按顺序连续展示，不会因为数据缺失压缩区间长度。当前错误实现会把离散年份直接紧挨排列，不会留出缺失年份的对应横轴空间，不符合连续展示的预期。

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