2

サーブレットから JSON データを取得する ng-click イベントで更新されるはずのAngular Chartバーがあります。問題は、$scope でデータが更新されても、チャートに更新が反映されないことです。なぜこうなった？チャートを手動で再描画する方法はありますか? Angular Chart Web サイトで多くのドキュメントを見つけることができませんでした。

編集: 要求に応じてテンプレートも添付しましたが、2 つの異なる div に同じコントローラーがあるという事実に関連している可能性がありますか?

    <div class="row" ng-controller="mygraphcontroller as chart">
        <!-- other things -->
        <a ng-click="applyFilterGraph()" class="btn btn-lg btn-primary btn-raised">Apply</a>
        <!-- other things -->
    </div>

    <div class="row">
        <div class="col-md-12" ng-controller="mygraphcontroller as chart">
            <div class="panel panel-default">
                <div class="panel-heading">*****</div>
                <div class="panel-body">
                    <canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>   
                </div>
            </div>
        </div>
    </div>

app.controller('mygraphcontroller', ['$scope', '$http', '$log', function($scope,$http,$log) {

    $scope.labels = [];
    $scope.data = [];

    // THE FOLLOWING POST WORKS FINE ON RUNTIME

    $http({
        method: 'POST',
        url: '/myservlet', 
        params: { param1: 'param1' }
    }).success(function(result) {

        var slabels = [];
        var array = [];
        var sdata = [array];

        for (var i = 0; i < result.length; i++) {
            slabels.push(result[i].company.companyDescription);
            array.push(result[i].value);
        }

        $scope.labels.push.apply($scope.labels,slabels);
        $scope.data.push.apply($scope.data,sdata);

    }).error(function(result) {
    });

    // THIS ONE DOES NOT WORK, CHART IS NOT UPDATED

   $scope.applyFilterGraph = function() {

        $scope.labels = [];
        $scope.data = [];


        $http({
            method: 'POST',
            url: '/myservlet', 
            params: { param2: 'param2' }
        }).success(function(result) {

        var slabels = [];
        var array = [];
        var sdata = [array];

        for (var i = 0; i < result.length; i++) {
            slabels.push(result[i].company.companyDescription);
            array.push(result[i].value);
        }

        $scope.labels.push.apply($scope.labels,slabels);
        $scope.data.push.apply($scope.data,sdata);

        }).error(function(result) {
        });

    };
4

1 に答える 1

3

命名の問題か、コントローラーがテンプレートにバインドされている方法のいずれかのようです

に変更ng-controller="mygraphcontroller chart"してみてくださいng-controller="mygraphcontroller"

また、それを 2 つの異なる div にバインドしています。ファイル全体をカバーする 1 つにバインドしてみてください。ng-controller="mygraphcontroller"

于 2015-06-05T14:04:05.357 に答える