在AngularJS中減少圖表的Canvas html代碼

Question

對於顯示圖表，我使用模塊angular-chart.js。 Angular應用程序需要兩種圖表，即條形圖和折線圖。目前，圖表在HTML視圖中被分開定義。

以下你可以看到當前的代碼：

<canvas id="bar" 
     height="120" 
     ng-show="showBarChart" 
     class="chart chart-bar" 
     chart-data="dataChart" 
     chart-labels="labels" 
     chart-series="series"> 
</canvas> 

<canvas id="line cvs-size" 
     height="120" 
     ng-show="showLineChart" 
     class="chart chart-line" 
     chart-data="dataChart" 
     chart-labels="labels" 
     chart-series="series"> 
</canvas> 

下面的下面的代碼是需要的目標：

<canvas id="{{ chartType }}" 
     height="120" 
     ng-show="showChart" 
     class="chart chart-{{ chartType }}" 
     chart-data="dataChart" 
     chart-labels="labels"> 
</canvas> 

用戶必須選擇查詢的可能性。單擊該按鈕將返回查詢的相應圖表。

CrudService.getData(from, to).$promise.then(
    function (resp) { 
     $scope.showChart = true; 
     $scope.chartType = 'bar'; 
     angular.forEach(resp, function (item) { 
      $scope.labels.push(item.fname); 
      $scope.data.push(item.age); 
     }); 
     $scope.dataChart = [$scope.data]; 
    }); 

請求已發送且答案已成功返回。但圖表不顯示在視圖中..我不知道問題在哪裏。

Answer 1

angular不支持爲指令動態設置類。您將不得不使用base圖表並動態設置type。