Javascript 每个堆叠列的Highcharts数据标签

我使用HighCharts生成了以下图表：

其中，每列上方的红色数字来自每个季度的系列数据。我已将数据标签与自定义数据一起使用，以实现这一点：

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，而不是每个单独系列的成本。我还禁用了其他3个系列的datalabels，否则它会将datalabels放在每个堆栈而不是每个列上

---

如何根据屏幕截图显示每列的正确成本？

堆栈标签可以通过yAxis设置并调用

---

JSFIDLE:

原因是您禁用了其他系列的数据标签，因此每次迭代第一个系列中的每个点时，都会返回值。更好的方法是使用。

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