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

Question

我正在使用 angularjs 基于所选项目加载图表。如果我选择第一个项目，我将在我的 Controller 功能中显示它的详细信息。当我选择下一个项目时，图形加载但第一个选择的项目详细信息不会破坏。如果我选​​择 4 个项目，则显示 4 次图形。如何清除莫里斯图表中的数据？

<!-- 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;
            }
        };
    });
     

     

     
     

     
 'lib/jquery/charts/morris/raphael-2.0.2.min.js',
     
 'lib/jquery/charts/morris/morris.js',
     
 '应用程序/ Controller /morris.js'
     

     

     
     

     
 
     
    <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>
     
 
    
 
    
 
     
 最佳答案 
 
    
 
    
 
     
我遇到了类似的问题..这就是我解决它的方法。
在绘制新图表之前，使用 .empty 清除 div。

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

     
就这样。像魔术一样工作。
     

     
希望这能解决你的问题
     
 
    
 
    
 
     
关于angularjs - 如何在使用 angularjs 更新 Controller 中的新数据之前销毁 Morris 图表数据？，我们在Stack Overflow上找到一个类似的问题：  https://stackoverflow.com/questions/46709508/  
 
    
 
   
	    	    					            
   
 
    
 上一篇：ms-access - 在 VBA 中，不能使用 Access.Application 对象 
 
    
 下一篇：ansible - 在 Ansible 中使用模板模块附加文件 
 
   
			

Answer 1

我遇到了类似的问题..这就是我解决它的方法。 在绘制新图表之前，使用 .empty 清除 div。

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

就这样。像魔术一样工作。 希望这能解决你的问题