Question

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

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

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

这个文件来自angular-chart.js 角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)...来自缺省的require函数，只能为node.js工作，要在浏览器上工作，它应该使用browsefy或等效的。因此，我想你没有生产chart.js，正如你在片段中看到的那样，对于angularjs，chart.js和angular-chart使用CND，它工作得很好。

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>

Answer 2

在浏览器中使用。

1像卡斯特罗说的那样，加入最方便易用的cdn。

2您可以尝试从NPM拉。并查看模块并搜索具有分发文件的“dist”文件夹。并调用将该文件添加到您的源。我找到的版本名为“Chart.bundle.js”

>YourProjectFolder
--->index.html
--->Chart.bundle.js

您的index.html文件

<head>
  <script src="Chart.bundle.js"></script>
</head>

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

2 个答案: