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
}]);

Highcharts图不随Firebase更新

1 个答案: