Angular and ChartJS colors

Angular and ChartJS colors

本文关键字：colors ChartJS and Angular      更新时间：2024-04-26

我使用的是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)'
              }];

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

更新：
可能是这样的：

$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>

在@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>
相关文章：