Question

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

$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.......');
    });

}

Answer 1

认为问题与google.charts.setOnLoadCallback

有关

每页加载调用一次

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

然后从回调中调用drawChart

参见以下示例......

$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);

Answer 2

我有同样的问题。我决定更改类的ID引用。

例：到

之后，用jquery识别元素：从document.getElementById（＆＃39; your_chart_id＆＃39;）到$（＆＃39; .your_chart_id＆＃39;）[0]

google.visualization.LineChart未加载第二次

2 个答案: