0

Tengo el caso de una gráfica, la cual se le definen los colores que puede utilizar en un array.

colors: ['#01579B', '#0288D1', '#03A9F4', '#4FC3F7', '#81D4FA', '#DCE775', '#FFB74D', '#FFEE58', '#0277BD', '#4DB6AC', '#00E5FF']

El problema es que en algunos casos respeta el orden, y en otros no. Ya que empieza no con el primer color definido. Este problema solamente lo tengo con la gráfica de columnas combinadas.

El caso que si respeta los colores es:

http://jsfiddle.net/jf7kj6g1/15/

y el que no respeta los colores:

https://jsfiddle.net/npwetntb/3/

Si alguien pudiera indicarme cual es mi error para que así todos los gráficos puedan utilizar el mismo orden de colores, muy agradecido.

Snippet donde la gráfica si respeta los colores:

 var contador = 0;
   var porcentajes = [
     85.3,
     85.3,
     85.3,
     85.3,
     85.3,
     85.3,
     85.3,
   ];
   Highcharts.chart('grafico0', {
     colors: ['#01579B', '#0288D1', '#03A9F4', '#4FC3F7', '#81D4FA', '#DCE775', '#FFB74D', '#FFEE58', '#0277BD', '#4DB6AC', '#00E5FF'],
     chart: {
       type: 'column'
     },
     title: {
       text: 'Eficiencia de Equipos de Aspersión, 01-Zona 1, Semana :15-12/02/2018 al 18/02/2018'
     },
     xAxis: {
       title: {
         enabled: true,
         text: ''
       },
       categories: ['05/02/2018 </br> 29064  ', '06/02/2018 </br> 29064  ', '07/02/2018 </br> 29064  ', '08/02/2018 </br> 29064  ', '09/02/2018 </br> 29064  ', '10/02/2018 </br> 29064  ', '11/02/2018 </br> 29064  ', ]
     },
     yAxis: [{
       tickInterval: 1,
       labels: {
         formatter: function() {
           var porcentaje = this.value * 100 / 24;
           return Highcharts.numberFormat(porcentaje, 2, '.', ',');
         }
       },
       min: 0,
       max: 24,
       title: {
         text: 'Porcentajes'
       },
       stackLabels: {
         enabled: true,
         style: {
           fontWeight: 'bold',
           color: 'gray'
         }
       }
     }, {
       min: 0,
       max: 10,
       title: {
         text: 'Porcentajes'
       },
       stackLabels: {
         enabled: true,
         style: {
           fontWeight: 'bold',
           color: 'gray'
         }
       },
       opposite: true
     }],
     tooltip: {
       headerFormat: '<b>{point.x}</b><br/>',
       pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
     },
     plotOptions: {
       spline: {
         dataLabels: {
           enabled: true,
           formatter: function() {
             var porcentajeLabel = porcentajes[contador];
             contador += 1;
             return '<span style="color: #D500F9;">' + porcentajeLabel + '%</span>';
           },
         }
       },
       column: {
         stacking: 'normal',
         dataLabels: {
           enabled: true,
           color: 'black'
         }
       }
     },
     series: [{
         name: '62-Operando Sin Horometro                                                ',
         data: [
           13.50,
           0,
           0,
           0,
           0,
           0,
           0,
         ],
         index: 1,
         legendIndex: 13
       },
       {
         name: '57-Traslado Equipo De Riego Con Tractor                                  ',
         data: [
           6.00,
           0,
           0,
           0,
           3.00,
           0,
           0,
         ],
         index: 1,
         legendIndex: 12
       },
       {
         name: '43-Cambios De Posicion                                                   ',
         data: [
           3.00,
           2.00,
           2.00,
           2.00,
           6.00,
           0,
           0,
         ],
         index: 1,
         legendIndex: 11
       },
       {
         name: '42-Instalación De Equipo                                                 ',
         data: [
           0,
           0,
           1.00,
           2.00,
           0,
           0,
           2.00,
         ],
         index: 1,
         legendIndex: 10
       },
       {
         name: '41-Problemas Con Accesorios                                              ',
         data: [
           0,
           0,
           2.70,
           0,
           0,
           0,
           0,
         ],
         index: 1,
         legendIndex: 9
       },
       {
         name: '18-Instalacion de equipos de riego                                       ',
         data: [
           0,
           0,
           1.00,
           0,
           6.00,
           0,
           0,
         ],
         index: 1,
         legendIndex: 8
       },
       {
         name: '17-Falta de Agua                                                         ',
         data: [
           0,
           0,
           0,
           2.80,
           0,
           0,
           0,
         ],
         index: 1,
         legendIndex: 7
       },
       {
         name: '06-Falta de Combustible                                                  ',
         data: [
           0,
           16.00,
           0,
           0,
           0,
           24.00,
           16.00,
         ],
         index: 1,
         legendIndex: 6
       },
       {
         name: '01-Operación                                                             ',
         data: [
           1.50,
           6.00,
           17.30,
           17.20,
           9.00,
           0,
           6.00,
         ],
         index: 1,
         legendIndex: 5
       },
       {
         name: 'Meta',
         type: 'spline',
         data: [20.47,
           20.47,
           20.47,
           20.47,
           20.47,
           20.47,
           20.47,
         ],
         color: '#D500F9'
       }
     ]
   });
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Snippet donde la gráfica no respeta los colores:

var contador = 0;
var porcentajes = [
  85.3,
  85.3,
  85.3,
  85.3,
  85.3,
  85.3,
  85.3,
];
Highcharts.chart('grafico0', {
  colors: ['#01579B', '#0288D1', '#03A9F4', '#4FC3F7', '#81D4FA', '#DCE775', '#FFB74D', '#FFEE58', '#0277BD', '#4DB6AC', '#00E5FF'],
  chart: {
    type: 'column'
  },
  title: {
    text: 'Eficiencia de Equipos de Aspersión, 01-Zona 1, Semana :14-05/02/2018 al 11/02/2018'
  },
  xAxis: {
    title: {
      enabled: true,
      text: ''
    },
    categories: ['29/01/2018 </br> 29064  ', '30/01/2018 </br> 29064  ', '31/01/2018 </br> 29064  ', '01/02/2018 </br> 29064  ', '02/02/2018 </br> 29064  ', '03/02/2018 </br> 29064  ', '04/02/2018 </br> 29064  ', ]
  },
  yAxis: [{
    tickInterval: 1,
    labels: {
      formatter: function() {
        var porcentaje = this.value * 100 / 24;
        return Highcharts.numberFormat(porcentaje, 2, '.', ',');
      }
    },
    min: 0,
    max: 24,
    title: {
      text: 'Porcentajes'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: 'gray'
      }
    }
  }, {
    min: 0,
    max: 10,
    title: {
      text: 'Porcentajes'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: 'gray'
      }
    },
    opposite: true
  }],
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    spline: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          var porcentajeLabel = porcentajes[contador];
          contador += 1;
          return '<span style="color: #D500F9;">' + porcentajeLabel + '%</span>';
        },
      }
    },
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: 'black'
      }
    }
  },
  series: [{
      name: '57-Traslado Equipo De Riego Con Tractor                                  ',
      data: [
        0,
        6.00,
        0,
        0,
        0,
        0,
        0,
      ],
      index: 1,
      legendIndex: 12
    },
    {
      name: '43-Cambios De Posicion                                                   ',
      data: [
        3.00,
        2.00,
        2.00,
        2.00,
        4.00,
        2.00,
        0,
      ],
      index: 1,
      legendIndex: 11
    },
    {
      name: '42-Instalación De Equipo                                                 ',
      data: [
        0,
        0,
        0,
        0,
        0,
        0,
        2.00,
      ],
      index: 1,
      legendIndex: 10
    },
    {
      name: '41-Problemas Con Accesorios                                              ',
      data: [
        3.00,
        0,
        2.00,
        3.00,
        2.00,
        2.00,
        2.00,
      ],
      index: 1,
      legendIndex: 9
    },
    {
      name: '18-Instalacion de equipos de riego                                       ',
      data: [
        0,
        6.00,
        0,
        0,
        0,
        0,
        0,
      ],
      index: 1,
      legendIndex: 8
    },
    {
      name: '17-Falta de Agua                                                         ',
      data: [
        0,
        4.00,
        2.00,
        0,
        0,
        2.00,
        2.00,
      ],
      index: 1,
      legendIndex: 7
    },
    {
      name: '08-Mantenimiento/servicio                                                ',
      data: [
        0,
        0,
        0,
        1.00,
        0,
        0,
        0,
      ],
      index: 1,
      legendIndex: 6
    },
    {
      name: '01-Operación                                                             ',
      data: [
        18.00,
        6.00,
        18.00,
        18.00,
        18.00,
        18.00,
        18.00,
      ],
      index: 1,
      legendIndex: 5
    },
    {
      name: 'Meta',
      type: 'spline',
      data: [20.47,
        20.47,
        20.47,
        20.47,
        20.47,
        20.47,
        20.47,
      ],
      color: '#D500F9'
    }
  ]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

2
  • 1
    te puedo dar una alternativa de solucion? es colocar en la serie la etiqueta color : value y te solucionara todo eso Commented el 6 mar. 2018 a las 16:39
  • Muchas gracias @JackNavaRow con tu alternativa logré solucionar el inconveniente, saludos. Commented el 6 mar. 2018 a las 18:24

1 respuesta 1

1

Una opcion facil es agregarle el color directo a la serie en formato hexadecimal como lo dice la documentacion

 series: [{
     name: 'serie1 ',
     data: [13.50,0,0],
     color: '#FFFFFF'
   },{
     name: 'serie2 ',
     data: [20,3,4],
     color: '#000000'
   }]

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.