Chart.js v3.5.1实现带真实点间距的时间散点图相关问题咨询

此前已有多个类似帖子，但给出的解决方案要么不完整，要么无法适配现代版本的chart.js。

问题根因 #

核心是两处版本兼容问题：

• Chart.js v3 对轴配置语法做了不兼容更新，你使用的xAxes: []是v2版本的写法，v3已废弃，导致时间轴配置未生效，x轴默认按类别轴等距排列
• Chart.js v3 不再内置时间解析适配器，需要额外引入适配包才能识别时间格式
• 你引入的moment.js为ES模块版本，在非模块化环境下直接引入会触发Unexpected token export报错

修正步骤 #

1. 引入正确依赖 #

需要引入三个UMD格式的资源：

• moment.js v2.x 版本（不要引入ES模块版本）
• 适配Chart.js v3的chartjs-adapter-moment适配包
• Chart.js v3.5.1 本体包

2. 修正代码配置 #

主要修改点：

• 轴配置改为v3语法，scales下直接定义x轴配置，无需嵌套数组
• 将数据中y值改为数字类型，避免渲染异常
• legend配置移到plugins下（符合v3规范）
• 无需手动将x值转为moment对象，适配器会自动解析标准时间字符串

修正后完整代码如下：

let testPoints =  [
    { x: '2017-01-06 00:00:00', y: 20 },
    { x: '2017-01-07 00:00:00', y: 17 },
    { x: '2017-01-08 00:00:00', y: 14 },
    { x: '2017-01-11 00:00:00', y: 7 },
]

var s1 = {
  label:'Overall activity',
  borderColor: '#33b5e5',
  data: testPoints,
  // 若需要纯散点不显示连线，打开下面的注释即可
  // showLine: false
};

const config = {
    type: 'line',
    data: { datasets: [s1] },
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Overall activity plot',
                font: {
                    size: 20
                }
            },
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    unit:'day'
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
};

new Chart(ctx, config);

之前尝试操作的问题说明 #

• 直接将config.type设置为scatter后空白：是因为x轴配置未生效，scatter默认需要数值型x轴，未配置时间轴的情况下无法识别时间字符串，按上述修正配置后可正常使用scatter类型，效果和line类型加showLine: false一致
• moment.js报错：更换为UMD格式的moment.js引入即可解决

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