如何在基于jQuery的MVC项目中集成Chart.js并解决Chart未定义错误

核心问题说明 #

你遇到的Chart未定义报错，核心原因是模块作用域隔离：你通过npm安装的Chart.js属于ES模块，默认仅在import它的脚本文件作用域内生效，你没有挂载到全局window对象的话，其他位置的jQuery业务代码无法访问到Chart变量。如果是直接单独引入chart.min.js报未定义，大概率是引入顺序晚于你的业务代码，导致调用时Chart还没加载完成。

具体操作步骤 #

步骤1：修改app.init.js引入并全局挂载Chart.js #

在app.init.js的npm包引入区域添加如下代码：

// npm packages
import jQuery from 'jquery';
// 新增：引入Chart.js，v3/v4版本通用引入方式，无需额外注册组件
import Chart from 'chart.js/auto';
// 新增：挂载到window全局对象，所有脚本都可以访问
window.Chart = Chart;

其余原有引入代码不需要改动。

步骤2：保证图表代码执行时机正确 #

所有图表实例化代码，必须放在DOM加载完成后执行，两种写法二选一即可：

• 直接把你的图表逻辑写在app.init.js现有jQuery(document).ready()回调的末尾
• 单独写的jQuery脚本，用$(function () { /* 你的图表实例化代码 */ })包裹

步骤3：清除冲突项并重新打包 #

• 删掉之前直接在HTML中引入的chart.min.js脚本，避免版本冲突
• 改完代码后重新执行项目的前端打包命令（比如npm run dev/npm run build，根据你项目实际配置执行），修改才会生效

功能验证示例 #

你可以在页面中加入测试canvas元素，验证集成是否成功：

1. 页面HTML中添加：<canvas id="testChart" width="400" height="200"></canvas>
2. 在app.init.js的jQuery(document).ready()回调末尾添加测试代码：

// 测试Chart加载效果
const ctx = document.getElementById('testChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
    datasets: [{
      label: '测试数据',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  }
});

启动项目后如果能正常渲染柱状图，说明集成成功。

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