javascript - How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included) - Stack Overflow

admin管理员组

文章数量:1306229

I want to use angular-chart.js so I followed the installation instructions first I downloaded the latest version from github of Charts.js .js and then I downloaded the latest version of angular-charts.js from github .js.

I copy and pasted this files into my project:

This file is from chart.js chart.js (I copied this file from chart.js notice that the first letter is in lower case)

THis file is from angular-chart.js angular-chart.min.js

Included both like this

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

and then I added this directive to my app

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

But I get this error

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 .js/
angular.min.js:6 Uncaught Error: [$injector:modulerr] .5.7/$injector/modulerr?

I want to use angular-chart.js so I followed the installation instructions first I downloaded the latest version from github of Charts.js https://github./chartjs/Chart.js and then I downloaded the latest version of angular-charts.js from github https://github./jtblin/angular-chart.js.

I copy and pasted this files into my project:

This file is from chart.js chart.js (I copied this file from chart.js notice that the first letter is in lower case)

THis file is from angular-chart.js angular-chart.min.js

Included both like this

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

and then I added this directive to my app

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

But I get this error

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/1.5.7/$injector/modulerr?

• javascript
• angularjs
• charts
• chart.js
• angular-chart

Share Improve this question Follow asked Oct 24, 2016 at 14:34 Bill_Data23Bill_Data23 65922 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I think you have downloaded the wrong Chart.js, this error: chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)... es from the missing of require function that works natively only for node.js, to work on browser it should use browsefy or equivalent. Therefore I supose you don't have the production chart.js, as you can see on the snippet, using the CND for both angularjs, chart.js and angular-chart, it worked perfectly.

• Chart.js https://cdnjs.cloudflare./ajax/libs/Chart.js/2.3.0/Chart.bundle.js
• Angular-chart //cdn.jsdelivr/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./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<script src="//cdn.jsdelivr/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>

To use in browser.

1 Like Castro said, add in the cdn which is most convinient and easy.

2 You can try pull from NPM. and look into the module and search for "dist" folder, which have distribution file. and call add that file to your source. The version I found have this name "Chart.bundle.js"

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

Your index.html file

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

本文标签：