Como alterar as colors do Angular-Chart.js

Eu uso o Angular-Chart.js (a versão AngularJS Chart.js ) para criar um gráfico de barras. O gráfico está trabalhando com as opções, exceto as colors.

Mesmo se eu configurá-los, é indicado na documentação , eles ficam cinza.

<canvas class="chart chart-bar" data="bilans.data" labels="bilans.labels" series="bilans.series" options="{ scaleShowHorizontalLines: true, scaleShowVerticalLines: false, tooltipTemplate: ' $', responsive: true }" colours="{ fillColor: 'rgba(47, 132, 71, 0.8)', strokeColor: 'rgba(47, 132, 71, 0.8)', highlightFill: 'rgba(47, 132, 71, 0.8)', highlightStroke: 'rgba(47, 132, 71, 0.8)' }" >

Na verdade, as opções estão funcionando, mas as colors não estão. Estou fazendo algo errado?

Você deve declarar o object de colours como uma matriz

 "colours": [{ fillColor: 'rgba(47, 132, 71, 0.8)', strokeColor: 'rgba(47, 132, 71, 0.8)', highlightFill: 'rgba(47, 132, 71, 0.8)', highlightStroke: 'rgba(47, 132, 71, 0.8)' }]; 

Plunkr de trabalho

Para mais informações consulte este post / isso também.


Para versões mais recentes, veja a resposta do eli0tt , pois os nomes dos parâmetros foram alterados.

Eu estava tendo a mesma dificuldade. Nos documentos diz para usar “colors” no entanto uma vez eu atualizei meu html para:

chart-colours

com uma matriz angular de:

$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];

Funcionou!

Como disse @pankajparkar. Apenas adicionando que você também pode passar colors html e angular-chart.js irá definir os objects de cor corretamente no rgba com as nuances apropriadas, por exemplo, $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

Parece que a nomeação mudou novamente. Estou usando o angular-chart.js 1.0.3 e o gerenciamento de colors para charts de barras funciona assim:

 colors:[{ backgroundColor:"#F00", hoverBackgroundColor:"#FF0", borderColor:"#0F0", hoverBorderColor:"#00F" }]; 

Na tag da canvas, o nome do atributo é colors de gráfico

Em 2017, obtive charts angulares para trabalhar com o código a seguir.

  1. que os nomes dos elementos são alterados. Retirado do código-fonte do gráfico angular.

  2. também que, assim que você ficar sem colors, o angular-chart irá gerá-las para você. Isso inclui uma opacidade de 0,2 para colors de plano de fundo.

  3. Se você especificar #hex colors, a opacidade será adicionada.

Especificação de colors via global.

 app.config(['ChartJsProvider', function (ChartJsProvider) { // Using ChartJsProvider.setOptions('bar', { didn't seem to work for me. // Nor did $scope.chartColors. Although I only tried that in the controller. Chart.defaults.global.colors = [ { backgroundColor: 'rgba(78, 180, 189, 1)', pointBackgroundColor: 'rgba(78, 180, 189, 1)', pointHoverBackgroundColor: 'rgba(151,187,205,1)', borderColor: 'rgba(0,0,0,0', pointBorderColor: '#fff', pointHoverBorderColor: 'rgba(151,187,205,1)' }, { backgroundColor: 'rgba(229, 229, 229, 1)', pointBackgroundColor: 'rgba(229, 229, 229, 1)', pointHoverBackgroundColor: 'rgba(151,187,205,1)', borderColor: 'rgba(0,0,0,0', pointBorderColor: '#fff', pointHoverBorderColor: 'rgba(151,187,205,1)' } ... 

No código-fonte, o código de separação de colors é atualmente. As colors definidas através das opções do Chart.js são redefinidas aqui (não consegui fazer isso funcionar).

Escolha as colors conforme o código-fonte do angular-chart.js:

  var colors = angular.copy(scope.chartColors || ChartJs.getOptions(type).chartColors || Chart.defaults.global.colors 

Sim, se você não especificar um object, a opacidade será definida para você. De angular-chart.js:

 function convertColor (color) { if (typeof color === 'object' && color !== null) return color; if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1))); return getRandomColor(); } ... function getColor (color) { return { backgroundColor: rgba(color, 0.2), pointBackgroundColor: rgba(color, 1), pointHoverBackgroundColor: rgba(color, 0.8), borderColor: rgba(color, 1), pointBorderColor: '#fff', pointHoverBorderColor: rgba(color, 1) }; } 

Você queria dizer: “colors”

 $scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000']; 

Também podemos ver os outros atributos que podemos mudar, como: lenda, série, passe o mouse. Ao lado de cada gráfico, você pode ver uma opção chamada “configurações”, isso é tudo o que você pode alterar.

Com a última versão $ scope.colors parece não funcionar. Você precisa usar chart-dataset-override="colors"

DEMO

 angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) { $scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0}; $scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; $scope.data = [ [1, 3, 5, 8, 9, 10, 11, 12, 33, 5] ]; $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)' }]; }); 
     Multi Slot Transclude