Angular 和 ChartJS 颜色答案

【问题标题】：Angular and ChartJS colorsAngular 和 ChartJS 颜色
【发布时间】：2016-08-02 05:06:20
【问题描述】：

我正在使用 Angular 图表 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>

【问题讨论】：

你试过换fillColor吗？
什么意思？如上所示，我使用 fillColor。我想要的是第二组三种颜色，奇数行设置为 1，偶数行设置为 2
啊好吧-我明白你在说什么
我用一个想法更新了帖子
以某种方式使用 ng-if 怎么样？

标签： javascript angularjs chart.js

【解决方案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>

【讨论】：