1

angular-nvd3-directives を使用して折れ線グラフを作成しています。

これはHTMLファイルです

<div class="line-chart" ng-controller="LineChartController as viewAll">

    <nvd3-line-chart
    data="viewAll.linechart"
    id="exampleId"
    width="800"
    height="400"
    showXAxis="true"
    showYAxis="true"
    tooltips="true"
    interactive="true"
    xAxisTickValues="[1378387500, 1378388100, 1378388700, 1378389900]"
    xAxisTickFormat="xAxisTickFormatFunction()"
    margin="{left:50,top:50,bottom:50,right:50}">

        <svg></svg>

    </nvd3-line-chart>

</div>

これはJSファイルです

    (function() {
        var app = angular.module('linechart-directives', ['nvd3ChartDirectives', 'LocalStorageModule']);

        app.controller('LineChartController', function($scope, $http, localStorageService, $interval) {
                $scope.viewAll = this;
                $scope.viewAll.linechart = [];

                $scope.pollActiveCon = function() {
                        if (localStorageService.get("getAll") == 0 || localStorageService.get("getAll") == undefined) {
                                $http.get('/statistics/getAllData').success(function(data) {
                                        $scope.viewAll.linechart = data;
                                        localStorageService.set("getAllData",1);
                                });
                        }else{
                                $http.get('/statistics/getLastData').success(function(data) {
                                        if ($scope.viewAll.linechart[0]==null) {
                                                $scope.viewAll.linechart = data;
                                        }else{
                                                console.log($scope.viewAll.linechart);
                                                $scope.viewAll.linechart[0]['values'].push(data[0]['values'][0]);
                                        }
                                });     
                        }
                };

                $scope.pollActiveCon();

                $interval( function(){ 
                        $scope.pollActiveCon();
                }, 120000);

                $scope.xFunction =function(){
                        return function(d){
                                return d[0];
                        }
                }

                $scope.yFunction = function(){
                        return function(d){
                                return d[1];
                        }
                }
                $scope.xAxisTicksFunction = function() {
                        console.log('xAxisTicksFunction');
                        console.log(d3.svg.axis().ticks(d3.time.minutes, 5));
                        return function(d) {
                                return d3.svg.axis().ticks(d3.time.minutes, 5);
    };                                                     
                };                                                             
                $scope.xAxisTickFormatFunction = function() {                  
                        return function(d) {                                   
                                return d3.time.format('%H:%M')(moment.unix(d).toDate());
                        };                                                              
                };                                                                      

        });                                                                             
})();                                                                                   

問題は、グラフでデータが更新されていないことですが、$scope.viewAll.linechart 変数を確認したところ、最後のデータが正常に追加されました。私は何が欠けていますか?

4

2 に答える 2

1

これを html objectEquality="true"に追加すると、問題が解決します。

于 2015-03-11T09:03:13.437 に答える