javascript - Cómo cambiar los colores de Angular-Chart.js

angularjs charts

Question

Yo uso Angular-Chart.js (la versión de AngularJS Chart.js ) para crear un gráfico de barras. El gráfico está trabajando con las opciones, excepto por los colores.

Incluso si los configuro están indicados en la documentación , permanecen grises.

<div class="graph-display" ng-controller="chartController">
    <canvas class="chart chart-bar"
    data="bilans.data"
    labels="bilans.labels"
    series="bilans.series"
    options="{
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: false,
        tooltipTemplate: ''<%= value %> $'',
        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)''
    }"
    ></canvas>
</div>

En realidad, las opciones funcionan pero los colores no. ¿Estoy haciendo algo mal?

Answer 1

Como dijo @pankajparkar. Solo agregue que también puede pasar colores html y angular-chart.js definirá los objetos de color apropiadamente en rgba con los matices apropiados, por ejemplo $scope.colors = [''#FD1F5E'',''#1EF9A1'',''#7FFD1F'',''#68F000''];

Answer 2

Querías decir: "colores"

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

También podemos ver los otros atributos que podemos cambiar, como: leyenda, serie, hover. Al lado de cada gráfico, puede ver una opción llamada "configuración", eso es todo lo que puede cambiar.

Answer 3

Parece que el nombramiento cambió nuevamente. Estoy usando angular-chart.js 1.0.3 y la gestión de color para gráficos de barras funciona así:

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

En la etiqueta canvas, el nombre del atributo es chart-colors

Answer 4

Estaba teniendo la misma dificultad. En los documentos, dice usar "colores", sin embargo, una vez que actualicé mi html a:

chart-colours

con una matriz angular de:

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

¡Funcionó!

Answer 5

Como en 2017, obtuve gráficos angulares para trabajar con el siguiente código.

1. que los nombres de los elementos son cambiados. Tomado del código fuente de la gráfica angular.

2. también que tan pronto como te quedes sin colores, la gráfica angular te los generará. Esto incluye una opacidad de 0.2 para colores de fondo.

3. Si especifica #hex colores se agregará opacidad.

Especificación de color a través de 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)''
  }
...

En el código fuente, el código de selección de color es actualmente. Los colores establecidos a través de las opciones de Chart.js se restablecen aquí (no conseguí que esto funcione).

Elija los colores según el código fuente de angular-chart.js:

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

Sí, si no especifica un objeto, se establece la opacidad para usted. Desde 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)
  };
}

Answer 6

Tu debería declarar el objeto de colours como una 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)''
}];

Trabajando Plunkr

Para obtener más información, consulte esta publicación / esto también.

Para versiones más nuevas, vea la respuesta de eli0tt , ya que los nombres de los parámetros han cambiado.