如何删除图表 (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()};

如何删除图表 (canvas) 超出其范围？

How to delete a chart (canvas) out of its scope?

html

javascript

jquery

canvas

chart.js