如何安装Chart.js和angular-chart.js（错误：需要包含Chart.js库）

Question

我想使用angular-chart.js，所以我先按照安装说明进行操作，首先从Charts.js的github https://github.com/chartjs/Chart.js下载了最新版本，然后又下载了angular-chart.js 的最新版本。来自github https://github.com/jtblin/angular-chart.js的 Charts.js 。

我将此文件复制并粘贴到我的项目中：

该文件来自chart.js chart.js（我从chart.js复制了此文件，注意第一个字母小写）

该文件来自angular-chart.js angular-chart.min.js

都包括这样

<script src="/myApp/chart.js"></script>
<script src="/myApp/angular-chart.min.js"></script>

然后我将此指令添加到我的应用中

angular.module('myApp',
    [
        'zingchart-angularjs',
        'oitozero.ngSweetAlert',
        'chart.js'
    ])

但是我得到这个错误

chart.js:4 Uncaught ReferenceError: require is not defined(anonymous    function) @ chart.js:4
angular-chart.min.js:10Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?

Answer 1

我认为您下载了错误的Chart.js，此错误：chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)...源于缺少仅适用于node.js的require函数，要在浏览器上工作，应使用browserfy或等效方法。因此，我认为您没有生产chart.js，就像您在代码段中看到的那样，将CND用于angularjs，chart.js和angular-chart，它运行良好。

• Chart.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js
• 角图 //cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js

angular.module('app', ['chart.js']);

angular.module('app')
  .controller('MyController', function ($scope, $timeout) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
      console.log(points, evt);
    };

    // Simulate async data update
    $timeout(function () {
      $scope.data = [
        [28, 48, 40, 19, 86, 27, 90],
        [65, 59, 80, 81, 56, 55, 40]
      ];
    }, 3000);
  });

angular.element(document).ready(function(){
  angular.bootstrap(document, ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-controller="MyController">
  <canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
    chart-series="series" chart-click="onClick"></canvas> 
</div>