Highcharts datalabel для каждой сложенной колонки

Question

я произвела следующую таблицу, используя Highcharts:

Где красные цифры над каждой колонкой вытягивает из рядов данных для каждого квартала. Я использовал dataLabels с пользовательскими данными для достижения этой цели:

var options = { 
    chart: { 
     type: 'column' 
    }, 
    credits: { 
     enabled: false 
    }, 
    title: { 
     text: null 
    }, 
    xAxis: { 
     categories: [ 
      'Q1', 
      'Q2', 
      'Q3', 
      'Q4' 
     ], 
     title: { 
      text: 'Year Quarter', 
      margin: 20, 
      style: { 
       fontFamily: 'Roboto', 
       fontSize: '14px', 
       fontWeight: '600' 
      } 
     }, 
     labels: { 
      style: { 
       fontFamily: 'Roboto', 
       fontSize: '12px' 
      } 
     } 
    }, 
    yAxis: [{ 
     min: 0, 
     allowDecimals: false, 
     title: { 
      text: 'No. Incidents', 
      margin: 20, 
      style: { 
       fontFamily: 'Roboto', 
       fontSize: '14px', 
       fontWeight: '600' 
      } 
     }, 
     labels: { 
      style: { 
       fontFamily: 'Roboto', 
       fontSize: '12px' 
      } 
     } 
    }], 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       align: 'left', 
       crop: false, 
       style: { 
        color: '#ff0000', 
        fontWeight: 'bold' 
       }, 
       formatter: function() { 
        return this.series.options.cost 
       }, 
       y: -20, 
       x: 0, 
       verticalAlign: 'top' 
      } 
     } 
    }, 
    series: [{ 
     "name": "Plant", 
     "data": [11,34,24,11], 
     "cost": 23 
    }, 
    { 
     "name": "Ship", 
     "data": [23,13,15,24], 
     "cost": 34, 
     "dataLabels": { 
      enabled: false 
     } 
    }, 
    { 
     "name": "Equipment", 
     "data": [23,16,24,42], 
     "cost": 33, 
     "dataLabels": { 
      enabled: false 
     } 
    }, 
    { 
     "name": "Cargo", 
     "data": [23,34,33,24], 
     "cost": 24, 
     "dataLabels": { 
      enabled: false 
     } 
    }] 
} 

Однако, как вы можете видеть, что это показывает 23 для всех столбцов вместо стоимости для каждой отдельной серии. Я также отключил datalabels для других 3-й серии, поскольку в противном случае он помещает datalabels в каждый стек, а не в каждый столбец.

Как я могу показать правильную стоимость для каждого столбца в соответствии с моим снимком экрана?

Answer 1

Этикетки для стеков могут быть установлены через yAxis и называются stackLabels.

... 
    yAxis: [{ 
     stackLabels: { 
      enabled: true, 
      align: 'right', 
      style: { 
       color: '#ff0000', 
       fontWeight: 'bold' 
      }, 
      x: -5, 
      verticalAlign: 'top' 
     } 
    ... 

JSFiddle: http://jsfiddle.net/8e08b387/1/