1

Estoy utilizando Morris bar para graficar pero mis datos son dinámicos mi problema que necesito cambiar cada color de cada barra pero no me sale este es mi codigo gracias. Ocupo un arreglo para llamar los datos y son 8 y los 8 corresponde a cada cada bara de tareas. No se si este bien la función barColor para llamar o a que se debe que no cambie el color por cada barra. introducir la descripción de la imagen aquí

var bar = new Morris.Bar({
  element: 'bar-chart',
  resize: true,
  data: [
  <?php
      echo "{y:'".$arrayestado[0]."',a:'".$estados[0]."'},";
      echo "{y:'".$arrayestado[1]."',a:'".$estados[1]."'},";
      echo "{y:'".$arrayestado[2]."',a:'".$estados[2]."'},";
      echo "{y:'".$arrayestado[3]."',a:'".$estados[3]."'},";
      echo "{y:'".$arrayestado[4]."',a:'".$estados[4]."'},";
      echo "{y:'".$arrayestado[5]."',a:'".$estados[5]."'},";
      echo "{y:'".$arrayestado[6]."',a:'".$estados[6]."'},";
      echo "{y:'".$arrayestado[7]."',a:'".$estados[7]."'},";          
  ?>
  ],
  barColors: function (row, series, type) {
        switch(row.y){
        case 1: {
            return 'red';
        }case 2: {
            return 'green';
        }case 3: {
            return 'blue';
        }case 4: {
            return 'cyan';
        }case 5:{
          return 'magenta';
        }case 6:{
          return 'purple';
        }case 7:{
          return 'gold';
        }
        default:{
            return 'orange';
        } 
    }
  },
  xkey: 'y',
  ykeys: ['a'],
  labels: [''],
  preUnits: '',
  hideHover: 'auto'
});
</script>
2
  • Viendo ejemplos por internet, lo que aprecio es lo siguiente. El switch, debería ser row.label. Y declara el barColor al final.
    – David_helo
    Commented el 30 jun. 2019 a las 20:12
  • xkey: 'y', ykeys: ['a'], labels: [''], preUnits: '', hideHover: 'auto', barColors: function (row, series, type) { switch(row.label){ case 1: { return 'red'; }case 2: { return 'green'; }case 3: { return 'blue'; }case 4: { return 'cyan'; }case 5:{ return 'magenta'; }case 6:{ return 'purple'; }case 7:{ return 'gold'; } default:{ return 'orange'; } } } Ahora todos son naranja
    – Nicolás
    Commented el 30 jun. 2019 a las 20:51

1 respuesta 1

2

El problema se debe a que row.y es igual al "label" de cada columna, es decir, row.y de la primer columna es igual a Cerrado.

Solución:

Dado que no utilizas ningún ID para detectar e identificar cada fila, sino que simplemente quieres usar el "orden", deberías usar row.x (el cual nos indica la columna a colorear).

Demo:

Morris.Bar({
  element: 'bar-example',
  data: [
    {y: '2006', a: 100},
    {y: '2007', a: 75},
    {y: '2008', a: 50},
    {y: '2009', a: 75},
    {y: '2010', a: 50},
    {y: '2011', a: 75},
    {y: '2012', a: 100}
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: [''],
  barColors: function(row, series, type) {
    if (type != 'bar') {
      return;
    }
    switch (row.x) {
      case 0: return 'red';
      case 1: return 'green';
      case 2: return 'blue';
      case 3: return 'cyan';
      case 4: return 'magenta';
      case 5: return 'purple';
      case 6: return 'gold';
      default: return 'orange';
    }
  }
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<div id="bar-example"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.