javascript - examples - ¿Cómo puedo configurar diferentes colores para cada barra en angular-chart.js?

chart.js angular 4

Question

He visto Cómo cambiar los colores de Angular-Chart.js , pero se relaciona con los colores de un conjunto completo (conjunto de datos), no de una barra específica.

Lo que estoy buscando es una forma de aplicar un color diferente para cada barra en un gráfico de barras; ChartJS a Angular.

Entonces, tengo un gráfico de barras:

<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas> 

Con el siguiente código angular (en un controlador de curso)

$scope.chartParams = {
listOfLocations: [''Trenzalore'',''Earth'',''Caprica'',''Sol'',''Tau Ceti''],
votes: [[5,10,6,7,2]],
series: ["Nice Places"],
colours: [{fillColor:getRandomColour()}],
options: {barShowStroke : false}
};

donde getRandomColour() devolvería un color aleatorio.

En este momento, el campo de colours aplica este color a todas las barras:

cuando realmente quiero un color diferente para cada barra:

Plunker

Answer 1

Uno de los problemas más grandes con las bibliotecas de Gráficos es que tarde o temprano chocas contra una pared, que solo puede ser violada pirateando o extendiendo la biblioteca. Sabiendo que golpeaste esa pared y cuál podría ser la respuesta a esta pregunta.

Aunque puede crear un gráfico personalizado de chart.js, también puede resolverlo con d3.js. Tomé uno de los ejemplos de diagrama de barras angulares d3.js básicos y agregué el comportamiento que desea:

var colors = d3.scale.category10();
// ...
bars.enter().append(''rect'')
.classed(''bar'', true)
.attr({x: chartW,
width: barW,
y: function(d, i) { return y1(d); },
height: function(d, i) { return chartH - y1(d); },
fill: function(d,i) { return colors(i) }
})
// ...

http://plnkr.co/edit/9RCYAPCEj9iRsxkkYPaV?p=preview

Personalizar un gráfico de cualquier manera, como cambiar el relleno, trazo o cualquier otra cosa está al alcance. Todavía es causa de mucho más código, pero si quieres personalizar más allá del soporte de la biblioteca, siempre hay mucho más código.

Answer 2

Usando la última versión de angular-chart.js , aquí hay un ejemplo que cambia los colores en función de una condición, sin modificar la biblioteca en sí. En cambio, usa la función de chart-dataset-override .

El truco es usar una serie con un solo conjunto de datos.

HTML

<div ng-controller="chartControl">
<canvas id="bar" class="chart chart-bar"
chart-data="goal.data"
chart-labels="goal.labels"
chart-options="goal.options"
chart-series="goal.series"
chart-dataset-override="goal.datasetOverride"></canvas>
</div>

JavaScript

Agregue el siguiente código al controlador:

 var exceeded = ''#27ae60'';
var achieved = ''#bdc3c7'';
var defeated = ''#e74c3c'';
$scope.goal = [];
$scope.goal.goal = 3;
$scope.goal.series = [ ''Visits'' ];
$scope.goal.labels = [
''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep''
];
$scope.goal.data = [
[5, 2, 3, 3, 3, 4, 2, 3, 4],
];
var backgroundColours = [];
// Assign the background colour based on whether the goal was achieved.
for( var i = 0; i < $scope.goal.data[0].length; i++ ) {
var v = $scope.goal.data[0][i];
if( v > $scope.goal.goal ) {
backgroundColours[i] = exceeded;
}
else if( v < $scope.goal.goal ) {
backgroundColours[i] = defeated;
}
else {
backgroundColours[i] = achieved;
}
}
// Create a place to hold the background colours.
$scope.goal.datasetOverride = [{ backgroundColor: [] }];
// Assign the colours to the pre-populated array.
$scope.goal.datasetOverride[0].backgroundColor = backgroundColours;
$scope.goal.options = {
barShowStroke: false,
scales: {
yAxes: [{
ticks: {
min: 0,
max: 7,
stepSize: 1
}
}]
}
};

Salida

Produce:

enlaces relacionados

• http://jtblin.github.io/angular-chart.js/examples/dataset-override.html
• http://jtblin.github.io/angular-chart.js/examples/dataset-override.js
• http://plnkr.co/edit/bnbZFXVlq4pX1BL5slqR?p=preview
• https://jsbin.com/bekugurasi/1/edit?html,js,console,output

Answer 3

Demostración Plunker

Lo más fácil era modificar el archivo fuente chart.js para aceptar una matriz de colores para fillColor en lugar de una cadena de un solo color.

Si pudieras hacer funcionar una de las otras soluciones propuestas, creo que tendría que hacerse de una manera muy poco angular.

Puede que a algunas personas no les guste ajustar la fuente, sino lo simple y fácil que fue, y logra el resultado deseado, y no es menos "angular" en su solución ... llamémosla una mejora a chart.js.

Tenga en cuenta que solo modifiqué la tabla de "barras" para aceptar una matriz de colores, porque parece que chart.js hace referencia a fillColor por separado en cada tipo de gráfico. Por lo tanto, debería poder hacer que esta modificación funcione para cualquiera de los tipos de gráficos.

El lugar que necesitas modificar:

 helpers.each(dataset.data,function(dataPoint,index){
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.bars.push(new this.BarClass({
value : dataPoint,
label : data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.strokeColor,
fillColor : dataset.fillColor[index], // <- added [index] here
highlightFill : dataset.highlightFill || dataset.fillColor,
highlightStroke : dataset.highlightStroke || dataset.strokeColor
}));
},this);

Este bloque de código se puede encontrar en la función Chart.type.extend para el gráfico de barras. Solo busca esto:

Chart.Type.extend({
name: "Bar",

y mire más hacia abajo dentro de esa función para el lugar donde empuja el fillColor al datasetObject.bars.

Ahora simplemente configure su gráfico como antes, excepto alimentarlo con una matriz para fillColor:

function($scope){
$scope.chartParams = {
listOfLocations: [''Trenzalore'',''Earth'',''Caprica'',''Sol'',''Tau Ceti''],
votes: [[5,10,6,7,2]],
series: ["Nice Places"],
colours: [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}],
options: {barShowStroke : false}
};
}