绘制 angular-图表时不能清空 $scope.labels 和 $scope.data

Question

我正在使用 angular-chart.js 绘制一些图表。我正在使用数组值从数据库中设置 $scope.labels 和 $scope.data 的值。我想在每次调用函数后使 $scope.labels 和 $scope.data 为空。请找到下面的代码

angular.module("app", ["chart.js"])
.controller("LineCtrl", function ($scope) {
     $scope.labels = [];      
      $scope.data = [[]];
   $scope.graphFunc = function(array) {


      for(var i =0; i < array.length; i++)
      {
        $scope.labels.push(array[i].name);
        $scope.data[0].push(array[i].age)  
      }

      $scope.onClick = function (points, evt) {
        console.log(points, evt);
      };

      $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
      $scope.options = {
        scales: {
          yAxes: [
            {
              id: 'y-axis-1',
              type: 'linear',
              display: true,
              position: 'left'
            },
            {
              id: 'y-axis-2',
              type: 'linear',
              display: true,
              position: 'right'
            }
          ]
        }
      };

   };

   $scope.labels = [];
   $scope.data = [[]];
});

但是图表没有出现。请注意我的数组是动态的，数组格式如下

var arrayVal = [{name:A,age:10},{name:B,age:30}];

已更新 HTML

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>

Answer 1

我可以找到问题，而不是在控制器内部声明 $scope.labels 和 $scope.data，通过在 chartFunc() 中声明这两个全局变量可以解决这个问题。因此，您不必在 chartFunc() 的末尾重新初始化这两个变量。

angular.module("app", ["chart.js"])
.controller("LineCtrl", function ($scope) {

   $scope.graphFunc = function(array) {

        $scope.labels = [];      
      $scope.data = [[]];
      for(var i =0; i < array.length; i++)
      {
        $scope.labels.push(array[i].name);
        $scope.data[0].push(array[i].age)  
      }

      $scope.onClick = function (points, evt) {
        console.log(points, evt);
      };
      $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
      $scope.options = {
        scales: {
          yAxes: [
            {
              id: 'y-axis-1',
              type: 'linear',
              display: true,
              position: 'left'
            },
            {
              id: 'y-axis-2',
              type: 'linear',
              display: true,
              position: 'right'
            }
          ]
        }
      };

   };
});

每次用户想要查看图表时，两个变量都会在 chartFunc 中重新初始化，并且先前的数组值会自动删除

绘制 angular-图表时不能清空 $scope.labels 和 $scope.data

Can't empty $scope.labels and $scope.data used when drawing angular-charts

angularjs

angular-chart