Geek Answers Handbook

Angular - charts do not work with requirejs

I am trying to use angular-chart, but I could not figure out how to add dependencies correctly. I get the following Uncaught TypeError error : Unable to read default properties undefined in angular -chart.js

(function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['angular', 'chart.js'], factory); } else if (typeof exports === 'object') { // Node/CommonJS module.exports = factory(require('angular'), require('chart.js')); } else { // Browser globals factory(angular, Chart); } }(function (angular, Chart) { 'use strict'; Chart.defaults.global.responsive = true; ....

because angular and chart are undefined.

my require config -

 'use strict'; require.config({ baseUrl: '/', paths: { 'angular': '/scripts/angular', 'angular-route': '/scripts/angular-route', 'ui-bootstrap': '/scripts/ui-bootstrap-tpls-0.13.0.min', 'angular-animate': '/scripts/angular-animate.min', 'chart': '/scripts/chart', 'angular-chart': '/scripts/angular-chart', 'data-utils': '/common/data-utils', 'string-utils': '/common/string-utils', 'app': '/config/app', 'routes': '/config/routes' }, shim: { 'app': { deps: ['angular', 'angular-route', 'ui-bootstrap', 'data-utils', 'string-utils', 'angular-chart'] }, 'angular-route': { deps: ['angular'] }, 'ui-bootstrap': { deps: ['angular', 'angular-animate'] }, 'angular-animate': { deps: ['angular'] }, 'angular-chart': { deps: ['angular', 'chart'] } } }); require ( ['app'], function(app) { angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'app']); } );

my controller

 define(['app'], function(app) { app.controller('homeController', [ '$scope', function($scope) { $scope.page = { title: 'Welcome to Easy Stitch' }; $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; $scope.series = ['Series A', 'Series B']; $scope.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90] ]; } ]); });

any other dependency works fine except for this. please if someone can help.

+5
source share
4 answers

I believe that I need to fix the dependency in my configuration file, and after that it works fine.

 require ( ['app'], function(app) { angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'chart.js', 'app']); } );
+2
source

you can change angular -chart.js:

Diagram

chart.js =>,

 (function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module define(['angular', 'chart'], factory); } else if (typeof exports === 'object') { // Node/CommonJS module.exports = factory(require('angular'), require('chart')); } else { // Browser globals factory(angular, Chart); }
+2
source

It seems that angular-chart is expecting the Chart.js module to be called "chart.js":

 if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['angular', 'chart.js'], factory); } ...

Chart.js itself uses an anonymous define ( ref ), so you should name it. You call it a “chart”:

 require.config({ paths: { ... 'chart': '/scripts/chart', ...

So just name it 'chart.js' in the paths configuration!

0
source

After installing angular-chart with a gazebo I had to change

 define(['angular', 'chart'], factory);

in

 define(['angular', 'Chart'], factory)

because Charts.js will export the chart, not the chart.

0
source

More articles:


All Articles