Highcharts 图表不随 Firebase 更新

Question

$scope.hhData = $firebaseArray(aRef.orderByChild('ts').startAt('2018-07-02').limitToLast(50));
$scope.hhData.$loaded().then(function () {
            $scope.chartSeriesYArray = [];
            $scope.chartSeriesXArray = [];
            $scope.hhData.$watch(function() {

            angular.forEach($scope.hhData, function (value) {
                $scope.chartSeriesXArray.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
                $scope.chartSeriesYArray.push(parseFloat(value.ein));
            });

            Highcharts.chart('chart', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Half Hourly Energy Consumption'
                },
                xAxis: {
                    categories: $scope.chartSeriesXArray,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Energy (kwh)'
                    }
                },
                series: [{
                    name: 'Meter01',
                    data: $scope.chartSeriesYArray
                }]
            });
        });
});

我希望能够将 Firebase 中的数据实时更新到图表中。但是，此代码仅允许数据在开始时更新一次，并且永远不会再次更新自身。有没有办法解决这个问题？ - 按照建议尝试了 $interval 方法，但没有成功:(

更新：我设法通过 $watch 做到了这一点。但是，这现在意味着我的图表只会在有数据进入时显示。如果没有数据进入（例如：当您刚刚打开系统时），则根本不会显示任何图表。这有另一种解决方法

Answer 1

尝试使用 $interval 服务在一定时间后检索您的数据。

    $interval(function() {
$scope.hhData.$loaded().then(function () {
            $scope.chartSeriesYArray = [];
            $scope.chartSeriesXArray = [];

            angular.forEach($scope.hhData, function (value) {
                $scope.chartSeriesXArray.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
                $scope.chartSeriesYArray.push(parseFloat(value.ein));
            });

            Highcharts.chart('chart', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Half Hourly Energy Consumption'
                },
                xAxis: {
                    categories: $scope.chartSeriesXArray,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Energy (kwh)'
                    }
                },
                series: [{
                    name: 'Meter01',
                    data: $scope.chartSeriesYArray
                }]
            });
        });
       }, 5000); //this function will run every 5 seconds

*别忘了你还需要在你的控制器中添加$interval参数，间隔以毫秒为单位

app.controller('myCtrl',["$scope", "$interval", function($scope, $interval) {
    //code goes here
}]);