Chart.js散点图x轴时间格式异常、日期适配器报错问题求助

核心问题原因 #

• 配置写法和当前Chart.js版本不匹配：你使用的是3.x版本的Chart.js，沿用了2.x版本的xAxes/yAxes数组格式轴配置，导致配置不生效。
• 缺失时间刻度依赖：Chart.js 3.x及以上版本不再内置日期处理能力，使用time类型刻度必须额外引入日期适配依赖，否则会触发适配器缺失报错。

修复步骤 #

1. 引入必要的日期适配依赖，除了Chart.js本体外，需要额外引入date-fns日期库和对应的Chart.js适配器
2. 将轴配置改为3.x版本支持的对象格式，去掉数组包裹

完整可运行代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.23.0/dist/date-fns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@chartjs/adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.min.js"></script>

<canvas id="mychart"></canvas>
<script>
const data = [{
  x: new Date("2017-01-20"),
  y: 43
}, {
  x: new Date("2017-01-21"),
  y: 45
}, {
  x: new Date("2017-01-22"),
  y: 120
}, {
  x: new Date("2017-01-23"),
  y: 100
}]

const options = {
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'day',
        tooltipFormat: 'MMM DD'
      }
    },
    y: {
      min: 0
    }
  }
}

const chartData = {
  datasets: [{
    data: data,
    label: 'Amount of Stuff',
    backgroundColor: '#ffffff'
  }]
}

const ctx = document.getElementById('mychart').getContext('2d')
new Chart(ctx, {
  type: 'scatter',
  data: chartData,
  options: options
})
</script>

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