Question

我已经设法将我的Firebase挂钩到Google Charts，效果很好，但如果没有数据评估为简单的if else表达式，我正在努力如何显示一条简单的消息，说“没有数据”已经宣布了。

例如，我为单个用户设置了Firebase数据值'NA'，理论上这意味着默认情况下图表不会显示，并且错误消息会在页面加载时显示更改回此值。但是，情况并非如此，触发它的唯一方法是单击我在HTML文件中设置的3D按钮。此外，当Firebase数据更改为大于零的值时，错误消息仍会显示。

这是我的代码：

JS档案

var displayMode = true;

$scope.statistics = function () {
    $mdSidenav('left').close();
    $state.go('statistics');
    $timeout(function () {
        setUpChart();
        var timer;
        $(window).on('resize', function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                setUpChart();
            }, 250);
        });
    });
};

function setUpChart() {

    $.ajax({
        url: '//www.google.com/jsapi',
        dataType: 'script',
        cache: true,
        success: function () {
            google.load('visualization', '1', {
                'packages': ['corechart'],
                'callback': drawChart
            });
        }
    });

    function drawChart() {

        // This links to my Firebase url
        userRef.on('value', function (snapshot) {

            var pass = 0;
            var fail = 0;

            snapshot.forEach(function (snapshot) {
                var userResults = snapshot.val();
                if (userResults.passFail === 'Pass') {
                    pass = pass + 1;
                }
                if (userResults.passFail === 'Fail') {
                    fail = fail + 1;
                }
            });

            if (pass === 0 && fail === 0) {
                console.log('No data: ' + pass + ' & ' + fail);
                $scope.error = true;
                $scope.errorMessage = 'No user data available, please try  
                again later.';
            } else {
                console.log('Is data: ' + pass + ' & ' + fail);
                $scope.error = false;
                $scope.errorMessage = null;
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Result');
                data.addColumn('number', 'Delegates');
                data.addRows([
                    ['Pass', pass],
                    ['Fail', fail]
                ]);

                var options = {
                    'is3D': displayMode,
                    'chartArea': {'width': '100%', 'height': '80%'},
                    'legend': {'position': 'top', 'alignment': 'center'}
                };

                var chart = new 
         google.visualization.PieChart(document.getElementById('pieChart'));
                chart.draw(data, options);
            }

        });

    }

}

// Changes chart type to 3D or top view on a butto click
$scope.chartFormat = function () {
    if (displayMode == true)
        displayMode = false;
    else
        displayMode = true;
    setUpChart();
};

HTML

<div class="container" style="padding-top: 100px; padding-bottom: 50px">

<button data-ng-model="displayType" style="display: block; margin: 0 auto"
        data-ng-click="displayType=displayType ? false : true;  
        chartFormat()"
        class="btn btn-default btn-md" type="button"><i class="material-
        icons">3d_rotation</i></button>

<div data-ng-if="error" class="alert alert-danger">
   <span data-ng-if="errorMessage" class="glyphicon glyphicon-remove">  
   </span><strong> {{errorMessage}}</strong>
</div>

<div id="pieChart" style="display: block; margin: 0 
auto; width: 100%; height: 500px"></div>

</div>

Answer 1

如果有人遇到类似问题，只需将 data-ng-init =“function_name_here（）”添加到您希望在html中显示的错误消息div中没有数据。

之前从未想过这个，但现在就开始处理，并在我的情况下动态显示错误消息，如果数据存在则删除消息！

Answer 2

只要Firebase中的数据发生更改，userRef.on('value', function (snapshot) {中的代码就会异步运行。那时AngularJS不期待对$scope的更改，所以它看不到它们。

解决方案是让AngularJS意识到您通过调用$scope作为charlieftl建议或通过将其包裹在$scope.$apply()中来更改$timeout()以便它被拾取在下一个摘要周期中：

userRef.on('value', function (snapshot) {
    $timeout(function() {
        var pass = 0;
        var fail = 0;

        snapshot.forEach(function (snapshot) {
            var userResults = snapshot.val();
            if (userResults.passFail === 'Pass') {
                pass = pass + 1;
            }
            if (userResults.passFail === 'Fail') {
                fail = fail + 1;
            }
        });

        if (pass === 0 && fail === 0) {
            console.log('No data: ' + pass + ' & ' + fail);
            $scope.error = true;
            $scope.errorMessage = 'No user data available, please try  
            again later.';
        } else {
            console.log('Is data: ' + pass + ' & ' + fail);
            $scope.error = false;
            $scope.errorMessage = null;
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Result');
            data.addColumn('number', 'Delegates');
            data.addRows([
                ['Pass', pass],
                ['Fail', fail]
            ]);

            var options = {
                'is3D': displayMode,
                'chartArea': {'width': '100%', 'height': '80%'},
                'legend': {'position': 'top', 'alignment': 'center'}
            };

            var chart = new 
     google.visualization.PieChart(document.getElementById('pieChart'));
            chart.draw(data, options);
        }

    });

});

Firebase数据发生变化时，Google图表不会更新

2 个答案: