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

Question

正在使用 angularjs 加载基于 selected 项目的图表。如果我 select 我在我的控制器功能中获取详细信息的第一个项目正在显示 it.when 我 select 下一个项目，图形加载但第一个 selected 项目详细信息不是 destroying.if i select 4 items, 4 times graph were showing.How 清除莫里斯图表中的数据?

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    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;
            }
        };
    });

Answer 1

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

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

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

希望这能解决您的问题

Answer 2

只传递一个空的数据数组

drawMorrisCharts1([])

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

How to destroy Morris chart data before updating new data in controller using angularjs?

angularjs

morris.js