2

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

誰かが 3 つ一緒に作業したことがある場合は、説明したり、JSFidlle へのリンクを投稿したりできます。

4

1 に答える 1

5

これで問題が解決するかどうかはわかりませんが、Google ローダーには、他の関数内で呼び出されるという既知の問題があります。他の環境のユーザーは、#setOnLoadCallbackメソッドではなく load 呼び出し内でコールバック関数を設定することに成功しています。これを使用してみてください：

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});
            }
        }
    }
});
于 2013-10-14T16:52:33.107 に答える