未捕获的类型错误:使用 Chart.js 时，图表不是构造函数

Question

我正在做我的第一个Cordova项目，并正在尝试使用Chart.js。文档指出 Chart.js 应像这样包含：

<script src="Chart.js"></script>
<script>
    var myChart = new Chart({...})
</script>

我使用 bower 安装了该库，它现在存在于 www/lib/chart.js 下。Chrome 在我加载Chart.js或lib/chart.js时为我提供了Failed to load resource: the server responded with a status of 404。

当我加载lib/chart.js/src/chart.js时，我收到一个不同的错误，说Uncaught TypeError: Chart is not a constructor在以下行中：

  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, { //...

这是文件图表中的内容.js：

var Chart = require('./core/core.js')();
require('./core/core.helpers')(Chart);
// ...
window.Chart = module.exports = Chart;

这是正确的chart.js文件吗？

Answer 1

我认为您使用的图表.js有错误
试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

Answer 2

在 Laravel 混合使用：

window.Chart = require('chart.js/auto').default;

Answer 3

这样做，它应该可以工作 import Chart from 'chart.js/auto';

https://www.chartjs.org/docs/latest/getting-started/integration.html

Answer 4

如果您使用的是 Chart.js v3 或更高版本：

import Chart from 'chart.js/auto';

如果使用图表.js v2：

import Chart from "chart.js";