Home / Questions / 130358
Accepted
raintrooper
Asked: 2020-01-12 06:12:46 +0800 CST 2020-01-12 06:12:46 +0800 CST

更改标签颜色 Highcharts JavaScript 图表

  • 772

我正在尝试更改图表中每个段的第三列标签的颜色，我遇到的问题是我无法根据第一列与第三列的值来做到这一点。

第一段为 Front 01，目标栏为浅蓝色，每小时配额栏为绿色，配额栏为黑色。

如果目标列是 2,650，而第三个（即配额）列相当于 2,650 的 80% 到 100%，则标签必须为蓝色，如果百分比介于 20% 到 79% 橙色和 19% 到 0 之间% 为红色。

在第一段的代码片段中，奇数的值为 2300.96，所以它应该是蓝色的，在第二段中，奇数的值是 112，而 2300 应该是红色。

非常感谢您的帮助。

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>

javascript

1 Answers

  1. Best Answer

    根据以下代码，我能够通过实现格式化程序功能来解决它​​。

    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>

    • 1