javascript - 如何将图表( Canvas )删除到其范围之外？

Question

我需要弄清楚如何删除此图表，因为当我在同一位置创建新图表时，前一个图表仍然显示出来。用户最初从下拉列表中选择某些内容。基于此，js 对 url 执行 $http.get() 请求。然后，它使用该数据创建一个图表，并每 x 秒刷新一次图表。当用户选择与下拉列表不同的内容时，它会执行相同的过程，但由于某种原因，我似乎无法销毁旧图表。您可以看到我尝试尝试 @ //$scope.myChart.destroy() 但此时它说我的图表未定义。

这是有道理的，因为当在下拉列表中选择一个新项目时，它基本上会从头开始调用所有这些内容。这意味着它不知道 $scope.myChart 是什么。但那我该如何销毁它呢？

如果它无限期地处于 $interval 循环中直到选择某些内容，则在某些内容发生更改之前它不会知道需要销毁它。但到那时，告诉它销毁是否为时已晚？

这是所有内容的 js:

'use strict';
angular.module('myapp', ['cgOwf'])
  .controller('MainCtrl', function($scope, $http, owf, $interval) {
    var infractions;
    var url = 'http://xxxxxxxxxxxxxx.xxx';
    var fullUrl = '';
    var mainInterval = '';
    $scope.username = '';
    $scope.totalscore = '';
    $scope.mychart = '';

    owf.ready(function() {
      fullUrl = null;
      owf.Eventing.subscribe('user-status', function(sender, msg, channel) {
        $scope.doughnutData = [];
        //myChart = '';
        console.debug('[%s] - received message %o inside of user card', channel, msg);
        $interval.cancel(mainInterval);
        fullUrl = url + msg;
        console.debug("Going to " + fullUrl + " inside of user card.");
        $http.get(fullUrl).success(function (returnedData) {
            console.debug("HOOOOORAY!?");

            $scope.username = returnedData.name;
            $scope.totalscore = returnedData.totalScore;

            console.debug("username " + $scope.username);
            console.debug("totalscore " + $scope.totalscore);

            returnedData.models.forEach(function (x) {
                console.debug("made it inside of forEach");
                console.debug(x.score);

                if (x.score >= 75) {
                    $scope.doughnutData.push({
                        'value': x.score,
                            'color': '#F7464A',
                            'highlight': '#FF5A5E',
                            'label': x.name
                    });
                    console.debug("pushed red");
                } else if (x.score >= 50) {
                    $scope.doughnutData.push({
                        'value': x.score,
                            'color': '#FDB45C',
                            'highlight': '#FFC870',
                            'label': x.name
                    });
                    console.debug("pushed yellow");
                } else {
                    $scope.doughnutData.push({
                        'value': x.score,
                            'color': '#424242',
                            'highlight': '#686868',
                            'label': x.name
                    });
                    console.debug("pushed grey");
                }

            });
            $scope.doughnutData = sortByKey($scope.doughnutData, 'value');
            //$scope.myChart.destroy();
            var ctx = document.getElementById("chart-area").getContext("2d");
            $scope.myChart = new Chart(ctx).Doughnut($scope.doughnutData, {
                responsive: true
            });
        });
        mainInterval = $interval(function () {
            $scope.doughnutData = [];
            $http.get(fullUrl).success(function (returnedData) {
                $scope.username = returnedData.name;
                $scope.totalscore = returnedData.totalScore.toFixed(3);

                returnedData.models.forEach(function (x) {
                    if (x.score >= 75) {
                        $scope.doughnutData.push({
                            'value': x.score,
                                'color': '#F7464A',
                                'highlight': '#FF5A5E',
                                'label': x.name
                        });
                    } else if (x.score >= 50) {
                        $scope.doughnutData.push({
                            'value': x.score,
                                'color': '#FDB45C',
                                'highlight': '#FFC870',
                                'label': x.name
                        });
                    } else {
                        $scope.doughnutData.push({
                            'value': x.score,
                                'color': '#424242',
                                'highlight': '#686868',
                                'label': x.name
                        });
                    }
                });
                $scope.doughnutData = sortByKey($scope.doughnutData, 'value');
                $scope.myChart.destroy();
                var ctx = document.getElementById("chart-area").getContext("2d");
                $scope.myChart = new Chart(ctx).Doughnut($scope.doughnutData, {
                    responsive: true
                });
            });
        }, 10000);
        $scope.$apply();
      });
    });

    function sortByKey(array, key) {
      return array.sort(function(a, b) {
        var x = a[key];
        var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
      });
    }

    $scope.launchIAT = function() {
      console.debug("Launching the IAT tool now.");
      owf.Launcher.launch({
        universalName: 'com.gdms.IAT',
        launchOnlyIfClosed: true
      });
    };

    $scope.setColor = function(score) {
      if (score >= 75) {
        return {
          background: '#FF4747',
          color: '#FFFFFF'
        }
      } else if (score >= 50 && score < 75) {
        return {
          background: '#FFFF47'
        }
      }
    };

  });

Answer 1

也许可以在下拉处理程序中将 .destroy 设置为条件。这样，当没有定义 myChart 时，它就不会第一次爆炸:

if($scope.myChart){$scope.myChart.destroy()};