График Highcharts не обновляется с помощью Firebase - PullRequest
Новая
       10

График Highcharts не обновляется с помощью Firebase

0 голосов
/ 02 июля 2018 
$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. Однако теперь это означает, что мой график будет отображаться только при поступлении данных. Если данные не поступают (например, когда вы просто включаете систему), тогда график вообще не будет отображаться. Это есть другой способ обойти это

1 Ответ

0 голосов
/ 02 июля 2018

Попробуйте использовать службу $ 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
}]);
...