Chart.js 3.9.1设置X轴为time类型时图表无法显示的问题

问题原因 #

Chart.js 3.x版本开始，时间轴（time scale）不再内置日期处理功能，必须引入第三方日期适配器（比如基于Moment.js或date-fns的适配器）才能解析和格式化日期，否则会抛出你遇到的这个错误。

解决方案步骤 #

1. 引入日期库（如Moment.js）和对应的Chart.js日期适配器
2. 确保脚本加载顺序：先加载日期库，再加载适配器，最后加载Chart.js

修改后的完整代码 #

HTML

<!-- 加载Moment.js日期库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<!-- 加载Chart.js的Moment适配器 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<!-- 加载Chart.js核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="mychart"></canvas>

JavaScript

let data = [12, 14, 13, 18, 21, 22, 25];
let labels = ["2017-01-20", "2017-01-22", "2017-01-24", "2017-01-26", "2017-01-28", "2017-01-30", "2017-02-01"];

let options = {
  scales: {
    x: {
      type: 'time', // 现在可正常启用
      time: {
        unit: 'day'
      }
    },
    y: { // 原代码的y0改为y，确保Y轴配置生效
      ticks: {
        min: 0
      }
    },
  },
};

let chartData = {
    labels: labels,
    datasets: [{
      data: data,
      label: 'Amount of Stuff',
      backgroundColor: '#035e7b',
      borderColor: '#035e7b', // 补充边框色，折线显示更清晰
      fill: false
    }]
};

let ctx = document.getElementById('mychart').getContext('2d');

new Chart(ctx, {
  data: chartData,
  type: 'line',
  options: options,
});

额外说明 #

• 若不想使用Moment.js，也可替换为date-fns适配器，只需更换对应的加载脚本即可
• 原代码中Y轴配置键为y0，这会导致配置不生效，需改为默认的y

内容的提问来源于stack exchange，提问作者Pawich S.