在HTML5畫布上繪制條形圖，然后將其清除以重新繪制是行不通的

Question

我有一個用於繪制小條形圖的AngularJS指令。 條形圖的數據是通過每分鍾運行的ajax請求獲取的。 第一次，條形圖繪制得很好。 下次，我想清除畫布，然后使用新獲取的值重新繪制條形圖。 但是，當我清除畫布時，條形圖不會重繪。

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

不知道如何從服務器填充值，但是您的手表可能需要隨后傳遞的，true參數來進行完整檢查，如下所示：

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

這是上面的文檔： https : //docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$ watch