कोणीय-चार्ट्स requjs

Question

के साथ काम नहीं कर रहा है, मैं कोणीय-चार्ट का उपयोग करने की कोशिश कर रहा हूं लेकिन मुझे यह नहीं पता था कि निर्भरता को सही तरीके से कैसे जोड़ना है। मैं निम्न त्रुटि Uncaught TypeError हो रही है: कोणीय 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; 
 
    ....

क्योंकि दोनों कोणीय और चार्ट अपरिभाषित हैं

मेरे config की आवश्यकता होती है

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

है

मेरी नियंत्रक

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

हर दूसरे निर्भरता ठीक काम कर रहा है इस के अलावा। कृपया अगर कोई मदद कर सकता है।

Answer 1

मुझे लगता है कि मुझे अपनी आवश्यकता कॉन्फ़िगरेशन फ़ाइल में निर्भरता को सही करना है और उसके बाद यह ठीक काम कर रहा है।

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

Answer 2

ऐसा लगता है कोणीय चार्ट उम्मीद Chart.js मॉड्यूल "chart.js" कहा जाने:

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

Chart.js ही उपयोग करता गुमनाम परिभाषित करते हैं (ref), तो यह आप पर निर्भर नाम करने के लिए है यह। आप इसे नामकरण कर रहे हैं "चार्ट":

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

तो, बस इसे 'chart.js'paths विन्यास में कहते हैं!

Answer 3

आप कोणीय chart.js संशोधित कर सकते हैं:

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

Answer 4

बोवर साथ कोणीय चार्ट स्थापित करने के बाद, मैं

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

को बदलना पड़ा

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

में क्योंकि Charts.js चार्ट और न चार्ट निर्यात करेगा।