highcharts - 突出显示 Highcharts 中的最后一列

Question

我有一个条形图，其中包含动态列。我想要的是除了最后一列，所有列都应该是灰色的。最后一列应该是绿色的。

谁能帮我解决这个问题？

Answer 1

您可以通过这种方式为最后一列赋予颜色

series: [{
        name: 'Test',
        color:'grey',
        data: [50, 30, 40, 70, {y: 34, color: '#66ff33'}]
    }]

小提琴链接

因此，如果数据数组是动态的，那么对于数组的最后一个值，您必须将最后一个元素作为{y: 34, color: '#66ff33'}数组的最后一个元素。

Answer 2

你可以使用zones.

演示：http: //jsfiddle.net/udL2ads2/6/

$(function() {
  var histSuccess = [100, 99, 100, 98, 98, 99.9, 97.5, 100, 95, 90];

  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Column chart with last column different color'
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total'
      }
    },
    series: [{
      name: 'Test',
      color: 'grey',
      data: histSuccess,
      
      zoneAxis: 'x',
      zones: [{
      	value: histSuccess.length - 1.5,
        color: 'grey'
      },{
      	color: '#66ff33'
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>