google.visualization.LineChart没有加载第二次 [英] google.visualization.LineChart is not loading second time

问题描述

我正在研究Angular / ionic Cordova项目。我使用google.visualization.LineChart来显示我的项目中的图表。第一次当我们在我绘制图表的页面，它是正常工作。但是当我进一步导航到下一个离子视图，并回到我绘制图表的屏幕，图表不显示。任何想法为什么它发生？这里是我的代码：

I am working on Angular/ionic Cordova project. I am using google.visualization.LineChart to display the chart in my project. First time when we come on the page where I have draw the chart, It is working properly. But when I further navigate to next ion-view and came back to the screen where I have drawn the chart, chart does not appear. Any idea why it is happening? here is my code:

$scope.$on('$ionicView.enter', function() {
    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop:false
    });
    serverRepo.salesMonthly().then(function(objS){
            $scope.monthlyData=objS.data;
            if(objS.data.orders == null){
                $ionicLoading.hide();
                alert('There is not data regarding Monthly Sale');
            }else{
                angular.forEach(objS.data.orders, function(value, key) {
                    objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn);
                    if(key == objS.data.orders.length-1){
                        $scope.data = objS.data;
                        drawChart();
                        console.log('drawChart Called');
                    }
                })
                $ionicLoading.hide();
            }

        },function(objE){
            console.log("Error:-\n"+JSON.stringify(objE));
            $ionicLoading.hide();
    });
});

function drawChart(){
    var options = {
        legend: { position: 'bottom' },
        curveType: 'function',
        titlePosition: 'in',
        axisTitlesPosition: 'in',
        hAxis: {
            textPosition: 'in',
            minValue: 0,
            textStyle:{color: "#fff"}
        },
        vAxis: {
            minValue: 0,
            maxValue: 13,
            textPosition: 'in',
            textStyle:{color: "#fff"},
            minorGridlines:{color: "#ccc"}
        },
        lineWidth: 6,
        fontSize:11,
        chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
        colors: ['#32BD76'],
        animation:{
            duration: 1500,
            easing: 'out',
            startup: true
        }
    };
    google.charts.setOnLoadCallback( function () {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'labels');
        data.addColumn('number', 'data');
        for(i = 0; i < $scope.data.labels.length; i++)
            data.addRow([$scope.data.labels[i], $scope.data.datasets.data[i]]);
        // Create and draw the visualization.
        $scope.myChart=new google.visualization.LineChart(document.getElementById('curve_chartmonthly'));
        $scope.myChart.draw(data, options);
        console.log('chart drawn.......');
    });

}

推荐答案

问题与 google.charts.setOnLoadCallback

页面加载

尝试将回调中的代码移动到 drawChart

try moving the code inside the callback to drawChart

然后从回调中调用 drawChart

请参阅以下示例...

see following example...

$scope.$on('$ionicView.enter', function() {
    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop:false
    });
    serverRepo.salesMonthly().then(function(objS){
            $scope.monthlyData=objS.data;
            if(objS.data.orders == null){
                $ionicLoading.hide();
                alert('There is not data regarding Monthly Sale');
            }else{
                angular.forEach(objS.data.orders, function(value, key) {
                    objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn);
                    if(key == objS.data.orders.length-1){
                        $scope.data = objS.data;
                        drawChart();
                        console.log('drawChart Called');
                    }
                })
                $ionicLoading.hide();
            }

        },function(objE){
            console.log("Error:-\n"+JSON.stringify(objE));
            $ionicLoading.hide();
    });
});

function drawChart(){
    var options = {
        legend: { position: 'bottom' },
        curveType: 'function',
        titlePosition: 'in',
        axisTitlesPosition: 'in',
        hAxis: {
            textPosition: 'in',
            minValue: 0,
            textStyle:{color: "#fff"}
        },
        vAxis: {
            minValue: 0,
            maxValue: 13,
            textPosition: 'in',
            textStyle:{color: "#fff"},
            minorGridlines:{color: "#ccc"}
        },
        lineWidth: 6,
        fontSize:11,
        chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
        colors: ['#32BD76'],
        animation:{
            duration: 1500,
            easing: 'out',
            startup: true
        }
    };

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'labels');
    data.addColumn('number', 'data');
    for(i = 0; i < $scope.data.labels.length; i++)
        data.addRow([$scope.data.labels[i], $scope.data.datasets.data[i]]);
    // Create and draw the visualization.
    $scope.myChart=new google.visualization.LineChart(document.getElementById('curve_chartmonthly'));
    $scope.myChart.draw(data, options);
    console.log('chart drawn.......');
}

google.charts.setOnLoadCallback(drawChart);

这篇关于google.visualization.LineChart没有加载第二次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！