首页 文章

每个堆叠列的Highcharts数据标签

提问于
浏览
0

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

enter image description here

从每个季度的系列数据中提取每列上方的红色数字 . 我已经将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而不是每个单独系列的成本 . 我还禁用了其他3个系列的数据标签,否则它会将数据标签放在每个堆栈而不是每个列上 .

如何根据我的屏幕截图显示每列的正确费用?

1 回答

  • 2

    堆栈标签可以通过yAxis设置,称为stackLabels .

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

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

相关问题