Tengo este código para que el gráfico funcione bien. Puedo hacer que el color de fondo de la leyenda dependa de $scope.colours pero para este ejemplo tengo una estática de solo 3 datos. Pero mi problema aquí es que los datos que obtengo son de la base de datos.
¿Es posible que el color generado para el gráfico sea el color de fondo para las leyendas?
Enlace de origen para el gráfico
var app = angular.module('App', ['chart.js']); app.controller('Ctrl', function ($scope) { $scope.labels = ["A","B","C"]; $scope.data = ["1","2","3"]; $scope.colours = ['#bff0dd', '#ffa67b','#b1c2ff']; }); <html ng-app="App" ng-controller="Ctrl"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.10.2/angular-chart.js"></script> </head> <body> <canvas id="doughnut" class="chart chart-doughnut doughnut-year" chart-colours="colours" chart-data="data" chart-labels="labels"> </canvas> <h3>Legends</h3> <div class="legend-item" ng-repeat="a in colours"> <label> A </label> </div> </body> </html>puede generar códigos de color de la siguiente manera:
angular.forEach($scope.data , function (dataItem, index) { var colorCode = getColorHex(index); $scope.colours.push(colorCode); }); var getColorHex = function (i) { //skip black & white i+=2; var colorDecimal = getRGB(i); var colorHex = decimalColorToHTMLcolor(colorDecimal); return colorHex; } function decimalColorToHTMLcolor(colorDecimal) { var intnumber = colorDecimal - 0; var red, green, blue; var template = "#000000"; red = (intnumber & 0x0000ff) << 16; green = intnumber & 0x00ff00; blue = (intnumber & 0xff0000) >>> 16; intnumber = red | green | blue; var HTMLcolor = intnumber.toString(16); HTMLcolor = template.substring(0, 7 - HTMLcolor.length) + HTMLcolor; return HTMLcolor; } function getRGB(index) { var p = getPattern(index); return getElement(p[0]) << 16 | getElement(p[1]) << 8 | getElement(p[2]); } function getElement(index) { var value = index - 1; var v = 0; for (var i = 0; i < 8; i++) { v = v | (value & 1); v <<= 1; value >>= 1; } v >>= 1; return v & 0xff; } function getPattern(index) { var n = parseInt(Math.cbrt(index)); index -= (n*n*n); var p = [n, n, n]; if (index == 0) { return p; } index--; var v = index % 3; index = parseInt(index / 3); if (index < n) { p[v] = index % n; return p; } index -= n; p[v] = parseInt(index / n); p[++v % 3] = index % n; return p; }