2015-05-25 22 views
5

Próbuję użyć wykresu kątowego, ale nie mogłem wymyślić, jak poprawnie dodać zależności. otrzymuję następujący błąd Uncaught TypeError: nie można odczytać własności 'domyślne' undefined w skośnych chart.jswykresy kątowe nie działają z 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; 
 
    ....

ponieważ zarówno kątowe i wykres są niezdefiniowane.

moich wymaga config jest

'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']); 
 
    } 
 
);

mój kontroler jest

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] 
 
      ]; 
 
     } 
 
    ]); 
 
});

każda inna zależność działa poprawnie z wyjątkiem tego. proszę, jeśli ktoś może pomóc.

Odpowiedz

2

Uważam, że muszę poprawić zależność w moim pliku konfiguracyjnym require, a następnie działa poprawnie.

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

0

Wydaje kątową-chart oczekuje moduł Chart.js być nazywany "chart.js":

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

Chart.js sama wykorzystuje anonimowy define (ref), więc jest to do ciebie, aby nazwy to. Jesteś nazywając go „Wykres”:

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

Tak, tylko nazwać 'chart.js' w konfiguracji paths!

+0

Spróbuj przejrzeć to pytanie: http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs Mam taki sam problem jak twój . Ale nie uda się! Dowolny pomysł? – VBMali

2

można zmodyfikować skośnych chart.js:

chart.js => wykres,

(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

Spróbuj przejrzeć to pytanie: http: // stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs Mam taki sam problem jak twój. Ale nie uda się! Dowolny pomysł? – VBMali

0

Po zainstalowaniu kątową-chart z altany, ja musiał zmienić

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

do

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

ponieważ Charts.js wyeksportuje Chart, a nie wykres.