2

Estoy intentando cambiar el color del label de la tercera columna de cada segmento en la gráfica, el problema que tengo es que no logro hacerlo en base al valor de la primer columna contra la tercera.

El primer segmento dice Frente 01 y la columna de meta está en color celeste, la columna de cuota por hora en verde y la columna de cuota en negro.

Si la columna de meta es de 2650 y la tercera que es la cuota equivale del 80% a 100% de esos 2650 el label debe ser color azul, si el porcentaje está entre 20% a 79% naranja y 19% a 0% en rojo.

En el snippet en el primer segmento la cuota tiene el valor de 2300.96 entonces debería ser color azul, en el segundo la cuota tiene valor de 112 contra 2300 lo cual debería ser rojo.

Por su ayuda muchas gracias.

Highcharts.chart('container', {
chart: {
	type: 'column'
},
title: {
	text: 'Cuota de Ingreso de Caña Por Frente'
},
subtitle: {
	text: 'Subtitulo'
},
xAxis: {
	categories: ['Frente 01', 'Frente 02', 'Frente 03', 'Frente 04', 'Frente 07', 'Frente 11', ],
	crosshair: true
},
yAxis: {
	min: 0,
	title: {
		text: 'TN DE CAÑA INGRESADA'
	}
},
tooltip: {
	headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} tons</b></td></tr>',
	footerFormat: '</table>',
	shared: true,
	useHTML: true
},
plotOptions: {
	column: {
		pointPadding: 0.2,
		borderWidth: 0,
		dataLabels: {
			enabled: true,
			color: 'blue'
		}
	}
},
legend: {
	layout: 'vertical',
	align: 'right',
	verticalAlign: 'top',
	x: -40,
	y: 80,
	floating: true,
	borderWidth: 1,
	backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
	shadow: true
},
credits: {
	enabled: false
},
series: [{
	name: 'Meta del Día',
	data: [2650.00, 2300.00, 900.00, 1800.00, 1300.00, 1400.00]
}, {
	name: 'Cuota Por Hora',
	data: [220.83, 191.67, 75.00, 150.00, 108.33, 116.67]
}, {
	name: 'Cuota Ingresada',
	data: [2300.96, 112.94, 96.20, 0.00, 133.99, 222.11]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

7
  • Haber si entiendo, lo que necesitas es que de cada segmento, condicionar el color de la tercera columna. Es así?
    – Rostan
    el 11 ene. 2018 a las 14:20
  • Así es Rostan, es correcto como lo dices. Muchas gracias el 11 ene. 2018 a las 14:21
  • De momento te puedo ayudar con este enlace: stackoverflow.com/questions/16893319/…, ya que ando algo ocupado. Pero leyendolo brevemente puedo ver que logran condicionar el color de una columna en base a un valor. Espero te sirva, saludos.
    – Rostan
    el 11 ene. 2018 a las 14:27
  • quieres pintar los frente n por cada color, o quieres cambiar los colores base de cada serie el 11 ene. 2018 a las 14:38
  • Es el color de los label, en otras palabras el color de los números que están sobre la tercera columna de cada frente. el 11 ene. 2018 a las 14:42

1 respuesta 1

1

Lo pude solucionar implementando una formatter function, según el siguiente código.

var contador = 0;
var contador2 = 0;
var arreglo = [];
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Cuota de Ingreso de Caña Por Frente'
  },
  subtitle: {
    text: 'Subtitulo'
  },
  xAxis: {
    categories: ['Frente 01', 'Frente 02', 'Frente 03', 'Frente 04', 'Frente 07', 'Frente 11', ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'TN DE CAÑA INGRESADA'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} tons</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        color: 'blue',

        formatter: function() {
          var theSeries = this.series[1];
          var theCompSeries = this.series.map;
          var color ='Black';

          if (this.series.name == "Cuota Por Hora"){
               arreglo[contador] = this.y;
           
            contador = contador + 1;
            
          } 
          if (this.series.name == "Cuota Ingresada"){
               var meta =  arreglo[contador2];
           var cuota = this.y;
            var porcentaje = (cuota/meta)*100.00;
            if (porcentaje >80.00){
              color = 'Green';
            }else if(porcentaje < 80 & porcentaje ){
            	color= 'Red';
            
            }
            console.log(porcentaje);

            contador2 = contador2 + 1;
          }          

          return '<span style="color: ' + color + '">' + this.y + ' </span>';
        },
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Meta del Día',
    data: [2650.00, 2300.00, 900.00, 1800.00, 1300.00, 1400.00]
  }, {
    name: 'Cuota Por Hora',
    data: [220.83, 191.67, 75.00, 150.00, 108.33, 116.67]
  }, {
    name: 'Cuota Ingresada',
    data: [2300.96, 112.94, 96.20, 0.00, 133.99, 222.11]
  }]
});

 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></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.