5

このようにして、ページの読み込み中のように読み込むと、ヒストグラムが正常に機能します。

$(document).ready()
{
x = new Array(10);
for (var i = 0; i < 10; i++) {
    x[i] = new Array(2);
    x[i][0]="txt";
    x[i][1]=100;

}
loadChart2(x);
}

Google 縦棒グラフ コード: ( Google charting apiから採用)

function loadChart2 (histValues)
{
    console.log('histValues:'+histValues);
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable(histValues);

        var options = {
            hAxis: {title: 'Score', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
};

私の問題：

しかし、angularJS コントローラー内から loadChart2() を呼び出すと、画面全体が白くなり、ブラウザー コンソールにエラーは表示されません。

$http({method: 'GET', url: urlGetHistogramData, timeout: maxTime})
            .success(function (data) {
            x=new Array(data.score_hist.length);
            var i=0;
            $.each(data.score_hist, function(){
                x[i] = new Array(2);
                x[i][0]=this.interval_start;
                x[i][1]=this.count;
                i++;
                });


                loadChart2(x);

});

デバッグ情報:

値が出力されていることをコンソールで確認できるため、サービスは正常interval_startにcount値を返します

histValuesまた、 loadChart() 関数からコンソールに期待どおりに出力されるのを見ることができます。

より詳細な詳細が必要な場合に備えて、関連する質問を 次に示します。 JSON からヒストグラムを作成する方法

loadChart2()AngularJS の onClick または任意の関数に関数を配置するとすぐに、コンソールにエラーのない完全に白い画面が表示されます。私の問題について誰もコメントしていないようです。これに関する私の調査結果でこのページを更新し続けます。

編集 この問題の解決策を追求しています。この問題に関連する質問をしました https://stackoverflow.com/questions/16816782/how-set-charts-data-in-google-chart-tool-directive-module- from-a-dynamically-po

4

4 に答える 4

9

重要なのは、Google チャート ライブラリのロード後に Angular モジュールを手動でブートストラップすることです。

http://jsfiddle.net/nCFd6/22/

アプリ

var app = angular.module('app', []);

指令

app.directive('chart', function() {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '=data'
        },
        template: '<div class="chart"></div>',
        link: function(scope, element, attrs) {

            var chart = new google.visualization.LineChart(element[0]);
            var options = {};

            scope.$watch('data', function(v) {

                var data = google.visualization.arrayToDataTable(v);
                chart.draw(data, options);

            });

        }
    };

});

コントローラ

app.controller('ChartController', function($scope) {

    $scope.scoreHistory = [];
    $scope.loadDataFromServer = function() {

        var x = [
            ['interval', 'count']
        ];

        var scoreHistory = [
            {
                intervalStart: 12,
                count: 20
            },
            {
                intervalStart: 100,
                count: 200
            },
            {
                intervalStart: 200,
                count: 50
            },
            {
                intervalStart: 250,
                count: 150
            }
        ];

        angular.forEach(scoreHistory, function(record, key) {

            x.push([
                record.intervalStart,
                record.count
            ]);

        });

        $scope.scoreHistory = x;

    };

});

ブードゥー

google.setOnLoadCallback(function() {

    angular.bootstrap(document, ['app']);

});

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

意見

<div ng-controller="ChartController">
    <button ng-click="loadDataFromServer()">load data</button>
    <chart data="scoreHistory"></chart>
</div>

この例でわかるように、再利用できるようにチャート ディレクティブを作成しました。

于 2013-05-29T16:05:04.247 に答える
1

私はまだ AngularJS の学習プロセスも進めています。これ ( https://stackoverflow.com/a/15012542/2406758 ) は今日私の心を吹き飛ばし、今後数週間でさらに多くの進歩を遂げると思います。

これは AngularJS チュートリアルの優れたコンパニオンであり、他では見られない方法でサービス、コントローラー、およびディレクティブについて説明しています。彼が説明していることを理解するのに役立つ、いくつかの良いディレクティブの例もあります。

これがあなたの問題に対する答えになるかどうかは完全にはわかりませんが、始めるには良い場所です.

私はあなたが次のようなものになると思います

<div id='chart' chart-view>

.directive( 'chartView', function ( ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      x = new Array(10);
      for (var i = 0; i < 10; i++) {
          x[i] = new Array(2);
          x[i][0]="txt";
          x[i][1]=100;
       }
       loadChart2(x);
    }
  };
});
于 2013-05-23T20:42:59.927 に答える