Chart.js从2.7.2升级至4.4.1遇‘Chart未定义’等错误求助

错误根源 #

• Uncaught SyntaxError: Cannot use import statement outside a module：Chart.js 4.x默认提供的是ES模块版本，普通<script>标签不支持模块语法，触发该错误。
• ReferenceError: Chart is not defined：ES模块版本不会在全局作用域暴露Chart对象，初始化代码无法直接访问全局的Chart。
• TypeError: Cannot read properties of undefined (reading 'helpers')：chartjs-plugin-datalabels 2.x依赖全局Chart对象，ES模块未暴露全局对象导致插件找不到Chart.helpers。

修复方案 #

方案1：使用UMD版本（兼容旧写法） #

Chart.js提供UMD构建版本，会在全局暴露Chart对象，和2.x行为一致，无需大幅修改代码：

替换原有脚本标签为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>

你的初始化代码无需修改，Chart会作为全局对象存在，插件也能正常加载。

方案2：使用ES模块（现代写法） #

如果想采用模块方式，调整如下：

1. 修改初始化脚本的标签为模块类型：

<script type="module" src="你的初始化脚本文件名.js"></script>

2. 在初始化JS文件中导入依赖并注册插件：

// 导入Chart.js和数据标签插件
import Chart from 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.esm.min.js';
import ChartDataLabels from 'https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.esm.min.js';

// 注册插件
Chart.register(ChartDataLabels);

// 以下为你的原有代码，无需修改
const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [{
    label: 'Weekly Sales',
    data: [18, 12, 6, 9, 12, 3, 9],
    backgroundColor: [
      'rgba(255, 26, 104, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(0, 0, 0, 0.2)'
    ],
    borderColor: [
      'rgba(255, 26, 104, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)',
      'rgba(0, 0, 0, 1)'
    ],
    borderWidth: 1
  }]
};

const config = {
  type: 'bar',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

这种方式无需单独引入Chart.js和插件的脚本标签，所有依赖通过模块导入完成。

额外注意 #

• 确保HTML中存在<canvas id="myChart"></canvas>元素；
• 方案1中插件会自动注册，方案2必须手动调用Chart.register才能启用数据标签插件。

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