2015-05-25 17 views
5

sto provando ad usare il grafico angolare ma non ho potuto capire come aggiungere correttamente le dipendenze. sto ottenendo seguente errore TypeError Uncaught: Impossibile leggere proprietà 'default' di indefinito negli angolari-chart.jsgrafici angolari che non funzionano con requirejs

(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; 
 
    ....

perché entrambi angolare e grafico sono indefiniti.

il mio bisogno di configurazione è

'use strict'; 
 
require.config({ 
 
    baseUrl: '/', 
 
    paths: { 
 
\t \t 'angular': '/scripts/angular', 
 
\t \t 'angular-route': '/scripts/angular-route', 
 
\t \t 'ui-bootstrap': '/scripts/ui-bootstrap-tpls-0.13.0.min', 
 
\t \t 'angular-animate': '/scripts/angular-animate.min', 
 

 
\t \t 'chart': '/scripts/chart', 
 
\t \t 'angular-chart': '/scripts/angular-chart', 
 
\t \t 
 
\t \t 'data-utils': '/common/data-utils', 
 
\t \t 'string-utils': '/common/string-utils', 
 

 
     'app': '/config/app', 
 
     'routes': '/config/routes' 
 
    }, 
 
\t shim: { 
 
\t \t 'app': { 
 
\t \t  deps: ['angular', 'angular-route', 'ui-bootstrap', 'data-utils', 'string-utils', 'angular-chart'] 
 
\t \t }, 
 
\t \t 
 
\t \t 'angular-route': { 
 
\t \t \t deps: ['angular'] 
 
\t \t }, 
 
\t \t 'ui-bootstrap': { 
 
\t \t  deps: ['angular', 'angular-animate'] 
 
\t \t }, 
 
\t \t 'angular-animate': { 
 
\t \t  deps: ['angular'] 
 
\t \t }, 
 
\t \t 'angular-chart': { 
 
\t \t  deps: ['angular', 'chart'] 
 
\t \t } 
 
\t } 
 
}); 
 

 
require 
 
(
 
    ['app'], 
 
    function(app) 
 
    { 
 
     angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'app']); 
 
    } 
 
);

mio controller è

define(['app'], function(app) 
 
{ 
 
\t 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] 
 
      ]; 
 
     } 
 
    ]); 
 
});

ogni altra dipendenza sta lavorando bene tranne per questo. per favore se qualcuno può aiutare

risposta

2

Immagino di dover correggere la dipendenza nel mio file di configurazione richiesto e dopo che funziona correttamente.

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

0

Sembra angolare-chart aspetta il modulo Chart.js di essere chiamato "chart.js":

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

Chart.js si utilizza anonima define (ref), quindi è a voi per nome esso. Si sono chiamandolo "grafico":

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

Così, lo chiamano semplicemente 'chart.js' nella configurazione paths!

+0

Prova a dare un'occhiata a questa domanda: http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs Ho lo stesso problema di come il tuo . Ma non andando a succhiare! Qualche idea? – VBMali

2

è possibile modificare le angolari-chart.js:

chart.js => grafico,

(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); 
    } 
+0

Prova a dare un'occhiata a questa domanda: http: // StackOverflow.it/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs Sto avendo lo stesso problema come il tuo. Ma non andando a succhiare! Qualche idea? – VBMali

0

Dopo l'installazione angolare-chart con pergolato, ho dovuto cambiare

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

in

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

perché Charts.js esporterà Chart e non.

Problemi correlati