Angular和ChartJS颜色

Question

我正在使用Angular chart js。没有人知道如何切换每隔一行的图表颜色。

这里是我的标记：

<canvas ng-if="hasStats" id="pie" class="chart chart-pie" 
chart-type="Pie" 
chart-colours=colors 
chart-data="data" 
chart-labels="labels" 
chart-legend="true"> 
</canvas> 

这里是我的JS：

$scope.labels = ["label 1", "label 2", "label 3"]; 
$scope.data = [300, 200, 500]; 
$scope.colors = [{ 
       fillColor: 'rgba(59, 89, 152,0.2)', 
       strokeColor: 'rgba(59, 89, 152,1)', 
       pointColor: 'rgba(59, 89, 152,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(59, 89, 152,0.8)' 
      }, 
       { 
       fillColor: 'rgba(0, 132, 180,0.2)', 
       strokeColor: 'rgba(0, 132, 180,1)', 
       pointColor: 'rgba(0, 132, 180,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(0, 132, 180,0.8)' 
       }, 
      { 
       fillColor: 'rgba(233, 30, 99,0.2)', 
       strokeColor: 'rgba(233, 30, 99,1)', 
       pointColor: 'rgba(233, 30, 99,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(233, 30, 99,0.8)' 
       }]; 

标记是在表中。我想切换颜色方案以匹配我的行。奇数行是一种配色方案，甚至是另一种配色方案。

UPDATE：
它可能是这样的：

$scope.colorsOdd = [{ // facebook blue 
       fillColor: 'rgba(59, 89, 152,0.2)', 
       strokeColor: 'rgba(59, 89, 152,1)', 
       pointColor: 'rgba(59, 89, 152,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(59, 89, 152,0.8)' 
      }, 
       { // twitter blue 
       fillColor: 'rgba(0, 132, 180,0.2)', 
       strokeColor: 'rgba(0, 132, 180,1)', 
       pointColor: 'rgba(0, 132, 180,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(0, 132, 180,0.8)' 
       }, 
      { // mav 
       fillColor: 'rgba(233, 30, 99,0.2)', 
       strokeColor: 'rgba(233, 30, 99,1)', 
       pointColor: 'rgba(233, 30, 99,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(233, 30, 99,0.8)' 
       }]; 

    $scope.colorsEven = [{ // facebook blue 
       fillColor: 'rgba(59, 89, 152,0.2)', 
       strokeColor: 'rgba(59, 89, 152,1)', 
       pointColor: 'rgba(59, 89, 152,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(59, 89, 152,0.8)' 
      }, 
       { // twitter blue 
       fillColor: 'rgba(0, 132, 180,0.2)', 
       strokeColor: 'rgba(0, 132, 180,1)', 
       pointColor: 'rgba(0, 132, 180,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(0, 132, 180,0.8)' 
       }, 
      { // teal 
       fillColor: 'rgba(91, 192, 222,0.2)', 
       strokeColor: 'rgba(91, 192, 222,1)', 
       pointColor: 'rgba(91, 192, 222,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(91, 192, 222,0.8)' 
       }]; 

我只是想不出最好的办法给他们更新2之间

切换：

<td rowspan="5" width="200"> 
        <div class="ng-scope" ng-controller="AmbasPieCtrl" ng-init="init(data)" style="width: 250px;"> 
         <canvas ng-if="hasStats" id="pie" class="chart chart-pie" 
         chart-type="Pie" 
         chart-colours=colors 
         chart-data="data" 
         chart-labels="labels" 
         chart-legend="true"> 
         </canvas> 
         <div ng-if="!hasStats" class="text-center"> 
          <h4>No stats found</h4> 
         </div> 
        </div> 

       </td> 

Answer 1

在@ewizard的帮助下，我能够正常工作。

这里是修订标记：

<div class="ng-scope" ng-controller="AmbasPieCtrl" ng-init="init(data)" style="width: 250px;"> 
         <div ng-if="hasStats"> 
          <div ng-hide="$odd"> 
           <canvas id="pie" class="chart chart-pie" 
           chart-type="Pie" 
           chart-colours=colorsEven 
           chart-data="data" 
           chart-labels="labels" 
           chart-legend="true"> 
           </canvas> 
          </div> 
          <div ng-hide="$even"> 
           <canvas ng-if="hasStats" id="pie" class="chart chart-pie" 
           chart-type="Pie" 
           chart-colours=colorsOdd 
           chart-data="data" 
           chart-labels="labels" 
           chart-legend="true"> 
           </canvas> 
          </div> 
         </div> 
         <div ng-if="!hasStats" class="text-center"> 
          <h4>No stats found</h4> 
         </div> 
        </div>