Отключить метку стека для столбца в графе с накоплением в Highcharts

Question

У меня есть столбчатый график с накоплением, подобный этому fiddle .
Если вы видите там один столбец серого цвета, чтобы указать, что он отключен.Я хочу скрыть общее количество от верхней части столбца, где цвет серый / или где категория «груши».

Я пробовал этот подход в этом ответе, но не могу понять, как отключить общее количество стеков на основе типа / столбца категории?

---

Поскольку ссылки на fiddle.net должны сопровождаться кодом, вот он:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    },
    series: {
      events: {
        afterAnimate: function(e) {
          var chart = e.target.chart;

          for (var j = 0; j < chart.series.length; j++) {
            for (var i = 0; i < chart.series[j].data.length; i++) {

              // alert(chart.series[j].data[i].category);
              if (chart.series[j].data[i].category == 'Pears') {
                chart.series[j].data[i].update({
                  color: 'grey'
                });
              }
            }
          }
        }
      },
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
  }]
});

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

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

Answer 1

Вы можете использовать yAxis.stackLabels.formatter ( API ) и использовать текущее значение метки x (this.x), чтобы найти имя нужной категории.

Например ( JSFiddle ):

yAxis: {
    stackLabels: {
        formatter: function() {
            // if this label is for pears, return nothing
            if(this.axis.chart.xAxis[0].categories[this.x] == 'Pears')
                return;
            // if not, return the default
            else
                return this.total; 
        }
    }
}

Answer 2

Как вы думаете, вы можете сделать это с опцией форматирования API Doc :

stackLabels: {
  enabled: true,
  style: {
    fontWeight: 'bold',
    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
  },
  formatter:function(){
      if (this.x !== 2) {
        return this.total;
      }
  }
}

this.x - это массив каждой категории.

Fiddle