How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
Question
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.com/chartjs/Chart.js and then I downloaded the latest version of angular-charts.js from github https://github.com/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.org/1.5.7/$injector/modulerr?
2 answers
solution1
5 2016-10-24 14:50:37
I think you have downloaded the wrong Chart.js, this error: chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)... comes 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.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js - Angular-chart
//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>
solution2
1 2018-05-04 20:08:14
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.