如何使用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

我不知道这是否能解决你的问题,但谷歌加载器已经知道在其他功能中被调用的问题.其他环境中的用户已成功在load调用中设置回调函数,而不是在#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});
            }
        }
    }
});