Question

我正在使用angular-nvd3指令来创建折线图。

这是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变量时，最后一个数据已成功添加到它。我错过了什么？

Answer 1

将此添加到html objectEquality =＆＃34; true＆＃34; 解决问题。

Answer 2

使用objectEquality =“true”

解决了我的数据更新问题

angularjs nvd3折线图不更新数据

2 个答案: