如何在使用angularjs更新控制器中的新数据之前销毁Morris图表数据？

• Z时代
• 2024-01-10
• 分类：问答

上午使用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>

回答：

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

以上是 如何在使用angularjs更新控制器中的新数据之前销毁Morris图表数据？ 的全部内容， 来源链接： utcz.com/qa/265165.html