angularjs - 如何使用 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");
        }
    }
}
});

如果有人让三个一起工作，也许你可以解释或发布一个 JSFdlle 的链接。

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