如何在使用angularjs更新控制器中的新數據之前銷燬Morris圖表數據？

上午使用angularjs基於選定的項目加載圖形。如果我選擇第一個項目，我在我的控制器功能中顯示它的詳細信息。當我選擇下一個項目時，圖形加載，但首先選擇的項目詳細信息不destroying.if我選擇4項，4次圖顯示。如何清除morris圖表中的數據？如何在使用angularjs更新控制器中的新數據之前銷燬Morris圖表數據？

<!-- begin snippet: js hide: false console: true babel: false -->

 app.controller('MorrisCtrl', ['$rootScope', '$scope', '$state','loadhiscpuservice', function ($rootScope, $scope, $state,loadhiscpuservice) { 
    getgraphdetails(); 
$scope.getserverdetails = function (server) { 
     // $state.go($state.current); 
     $scope.serveridvalue = []; 
     var serverid = []; 
     $scope.serveridvalue = server; 
     serverid = $scope.serveridvalue.serverID; 

     var date = new Date(); 
     $scope.formattedDate = $filter('date')(date, "dd/MM/yyyy hh:mm:ss a", 'UTC'); 
     var date1 = $scope.formattedDate; 
     //chart1.destroy();  
     getgraphdetails(serverid, date1);  
    }; 
    function getgraphdetails(serverid, date1) { 
     var details = { serverID: serverid, minutes: "180", date: "date1" }; 
     loadhiscpuservice.getCPUvalues(details). 
       success(function (results) {     
        alert(results); 
        var value = JSON.parse(results); 
        drawMorrisCharts1(results); 
       }) 
       .error(function (error) { 
        $scope.result = 'Error Occured : ' + error; 
       }); 
    }; 
    function drawMorrisCharts1(results2) { 
      var points = []; 
      points = results2; 
      Morris.Area({ 
       element: 'area-chart2', 
       data: points, 
       xkey: 'lastUpdatedDateTime', 
       ykeys: ['value'], 
       labels: ['value'], 
       parseTime: false, 
       pointSize: 2, 
       hideHover: 'auto', 
       lineColors: [$rootScope.settings.color.themesecondary] 
      }); 
     }; 
     }) 


          
   
    
    app.factory('loadhiscpuservice', function ($http) { 
 
     return { 
 
      //load d0ta service  
 
      getCPUvalues: function (details) { 
 
       var request = $http({ 
 
        method: 'POST', 
 
        url: 'http//abc link',    
 
        data: { aaa: details.aaa, minutes: details.minutes, date: details.date } 
 
       }); 
 
       return request; 
 
      } 
 
     }; 
 
    }); 
    
   
 

 


<!-- language: lang-css --> 

     'lib/jquery/charts/morris/raphael-2.0.2.min.js', 
     'lib/jquery/charts/morris/morris.js', 
     'app/controllers/morris.js' 

<!-- language: lang-html --> 


          
   
    
    <div ng-controller="MorrisCtrl"> 
 
    <div class="orders-container"> 
 
      <div class="orders-header"> 
 
       <h6>Servers List</h6> 
 
      </div> 
 
      <ul ui-sref-active="active" class="orders-list" onscroll="true"> 
 
       <li class="order-item"> 
 
        <div class="row"> 
 
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-left"> 
 
          <div class="item-price">Servers: </div> 
 
         </div> 
 
         <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-right"> 
 
          <div class="input-group"> 
 
           <select ng-options="server.serverName for server in serverDetails1" class="form-control" ng-model="server" ng-change="getserverdetails(server)"> 
 
            <option value="">--Select Server--</option> 
 
           </select> 
 
           <span class="input-group-addon"> 
 
            <i class="fa fa-desktop"></i> 
 
           </span> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-12 col-lg-12"> 
 
      <div id="area-chart2" class="chart chart-lg"></div> 
 
      </div> 
 
     </div>

來源

2017-10-12 divya

您可以發佈完整的代碼或所需的最低限度能夠重現問題嗎？ – krlzlx

我轉貼完整的代碼請檢查並告訴我。 – divya

謝謝但HTML/JavaScript代碼選擇一個項目在哪裏？ – krlzlx

我面臨着類似的問題..這是我如何解決它。繪製新圖表之前，請使用.empty清除div。

$("#area-chart2").empty();

這就是所有。像魔術一樣工作。

希望這可以解決您的問題

來源

2017-11-06 16:45:34

感謝那對我有用 – divya

如何在使用angularjs更新控制器中的新數據之前銷燬Morris圖表數據？

回答

相關問題