google.visualization.LineChart не загружается второй раз

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

У меня такая же проблема. Я разрешаю изменение ссылки идентификатора для класса.

Пример: к

После того, идентифицировать элемент с JQuery: от document.getElementById ('your_chart_id') до $ ('your_chart_id.') [0]