突出显示 Highcharts 中的最后一列

Question

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

谁能帮我解决这个问题？

Answer 1

你可以用这种方式给最后一列颜色

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

Fiddle link

因此，如果数据数组是动态的，那么对于数组的最后一个值，您必须将最后一个元素作为数组的 {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>

突出显示 Highcharts 中的最后一列

Highlighting last column in Highcharts

highcharts

column-chart