如何使用RequireJS AngularJS和Google Visualization API

Question

想知道是否有人已經獲得RequireJS，ANgularJS和Google Visualization API的協同工作。我似乎無法讓圖表正常工作。 我遇到的主要問題是google.setOnLoadCallback（）沒有運行。下面是 是我的代碼。如果有另一個圖表庫更易於與RequireJS一起使用，我不會完全在Google Visualization API上銷售。

define([ 'jquery'],function ($) { 
return function() { 
    return { 
     restrict: 'A', 

     link: function (scope, lElement, attrs) { 

      console.log("loaded google jsapi"); 

       console.log("google"); 

      google.load("visualization", "1", {packages:["corechart"]}); 


      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
       console.log("we are in the call back"); 
       var data = google.visualization.arrayToDataTable([ 
        ['Year', 'Sales', 'Expenses'], 
        ['2004', 1000,  400], 
        ['2005', 1170,  460], 
        ['2006', 660,  1120], 
        ['2007', 1030,  540] 
       ]); 

       var options = { 
        title: 'Company Performance', 
        vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
       }; 

       var chart = new google.visualization.BarChart(lElement[0]); 
       chart.draw(data, options); 
      } 

      console.log("called google.load for visualization"); 
     } 
    } 
} 
}); 

如果有人得到了呃三個一起工作，也許你可以解釋或發佈一個JSFidlle的鏈接。

Answer 1

我不知道這是否會解決您的問題，但谷歌加載器已知問題被稱爲內部其他功能。其他環境中的用戶已成功設置加載調用中的回調函數，而不是在#setOnLoadCallback方法中。嘗試使用這個：

define(['jquery'],function ($) { 
    return function() { 
     return { 
      restrict: 'A', 
      link: function (scope, lElement, attrs) { 
       function drawChart() { 
        var data = google.visualization.arrayToDataTable([ 
         ['Year', 'Sales', 'Expenses'], 
         ['2004', 1000,  400], 
         ['2005', 1170,  460], 
         ['2006', 660,  1120], 
         ['2007', 1030,  540] 
        ]); 

        var options = { 
         title: 'Company Performance', 
         vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
        }; 

        var chart = new google.visualization.BarChart(lElement[0]); 
        chart.draw(data, options); 
       } 
       google.load("visualization", "1", {packages:["corechart"], callback: drawChart}); 
      } 
     } 
    } 
});