在HTML5画布上绘制条形图，然后将其清除以重新绘制是行不通的

Question

I have an AngularJS directive that is used to draw a small bar chart. The data for the bar chart is fetched via an ajax request that runs every minute. The first time through, the bar chart is drawn just fine. The next time through, I want to clear the canvas, and redraw the bar chart with the newly fetched values. However when I clear the canvas, then the bar chart isn't redrawn.

angular.module('statsApp')
  .directive('miniChart', function () {
    return {
      template: '<canvas width="100" height="50"></canvas>',
      restrict: 'E',
      replace: 'true',
      scope: {
        values: '=',
        property: '@',
        color: '@',
        colorZero: '@'
      },
      link: function(scope, element) {
        var posX = 0;
        var canvas = element[0];
        scope.$watch('values', function(values) {
          if(values) {
            var barMargin = 3;
            var barWidth = Math.abs(canvas.width / 7) - barMargin;
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            angular.forEach(values, function(value) {
              console.debug(value);
              ctx.fillStyle = value[scope.property] > 0 ? scope.color : scope.colorZero;
              var rectHeight = value[scope.property] + 1;
              ctx.fillRect(posX, Math.abs(rectHeight - canvas.height), barWidth, rectHeight);
              posX += (barWidth + barMargin);
            });
          }
        });
      }
    };
  });

Answer 1

Not to sure how you populate values from the server, but your watch might need the ,true parameter passed afterwards to do the full check like this:

scope.$watch('values', function(values) {
    ...
}, true);

Here are the docs on it: https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$watch