使用RequireJS引入CanvasJS报错：CanvasJS.Chart is not a constructor

嘿，我一眼就瞅出问题出在你的RequireJS shim配置上啦，咱们一步步捋清楚：

核心问题：Shim配置错误 #

你原来的shim写法把chart当成了canvasjs配置的一个子属性，而且exports指向了Chart，这完全不对——CanvasJS加载后是在全局暴露CanvasJS这个对象，Chart只是它下面的一个构造函数而已。

原错误配置里的这部分是问题根源：

shim: { 
  'canvasjs' : { 
    deps: ['jquery'], 
    chart: { exports: 'Chart' } // 这里完全写错了！
  } 
}

修正后的RequireJS配置 #

正确的shim应该直接指定canvasjs的exports为全局的CanvasJS，因为这才是库加载后暴露的全局变量：

require.config({
  shim: {
    'canvasjs': {
      deps: ['jquery'], // CanvasJS依赖jQuery，这部分是对的
      exports: 'CanvasJS' // 指向全局暴露的CanvasJS对象
    }
  },
  paths: {
    "jquery": "../js/jquery-1.10.2.min",
    "canvasjs": "../js/canvasjs.min"
  }
});

完整的修正代码 #

把配置改好后，你的回调函数里就能正常拿到CanvasJS对象，进而调用CanvasJS.Chart构造函数了：

require.config({
  shim: {
    'canvasjs': {
      deps: ['jquery'],
      exports: 'CanvasJS'
    }
  },
  paths: {
    "jquery": "../js/jquery-1.10.2.min",
    "canvasjs": "../js/canvasjs.min"
  }
});

require(["jquery", "canvasjs"], function($, CanvasJS) {
  function AppViewModel() {
    var self = this;
    // 这里可以添加ViewModel的逻辑
  }

  // 现在能正常实例化Chart了
  var chart = new CanvasJS.Chart("chartContainer", {
    // 这里填入你的图表配置，比如标题、数据系列等
    title: { text: "我的第一个CanvasJS图表" },
    data: [{
      type: "column",
      dataPoints: [
        { label: "苹果", y: 10 },
        { label: "香蕉", y: 15 },
        { label: "橙子", y: 25 },
        { label: "葡萄", y: 30 }
      ]
    }]
  });
  chart.render(); // 别忘了渲染图表
});

额外提醒 #

• 确保你的canvasjs.min.js文件路径正确，和paths里配置的../js/canvasjs.min一致
• 页面上要有一个id为chartContainer的DOM元素，比如<div id="chartContainer" style="height: 300px; width: 100%;"></div>

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