Vanilla JS项目集成Chart.js报错：TypeError: Cannot read properties of undefined (reading 'axis')

可能的原因1：CDN链接包含无效空格 #

你提供的Chart.js CDN链接开头有多余空格，这会导致浏览器请求错误的资源地址，Chart.js无法正常加载，进而引发后续的axis相关错误。

修复方式：
把script标签里的src链接前后的空格去掉，正确的链接应该是：

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script>

可能的原因2：代码执行时机过早 #

如果你的JS代码写在<head>标签里，或者DOM元素还没渲染完成就执行了，即使能获取到canvas元素，Chart.js也可能因为初始化时机不对抛出异常。

修复方式：
将你的Chart初始化代码放在DOM加载完成后执行，比如：

document.addEventListener('DOMContentLoaded', function() {
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
      }],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
});

或者直接把JS代码放在<body>标签的最底部，确保DOM元素已经渲染完毕。

验证步骤 #

1. 先修复CDN链接的空格问题，刷新页面看Chart.js是否正常加载（可以在浏览器开发者工具的Network标签里查看是否有404请求）。
2. 调整代码执行时机，确保DOM和Chart.js都加载完成后再初始化图表。

按照上面的步骤修改后，你的柱状图应该能正常渲染了。

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