javascript - 是否可以在高图中将百分比放在列的中间？

Question

我正在使用 Highchart 创建一个如下图的柱形图，但是我很难将百分比放在列中，我想将百分比放在列的中间，如下图。请提出您的建议。

链接：https ://jsfiddle.net/dhitiacahya/po8j7sub/7/

 Highcharts.chart('container', {
    title: {
        text: 'column'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '50px',
                top: '18px',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'Jane',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'John',
        data: [2, 3, 5, 7, 6]
    },]
});

标签： javascriptjqueryhighcharts

Answer 1

添加下图所示的plotOptions

    plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.y + "%";
            }
        }
    },
    bar: {
        dataLabels: {
            enabled: true
        }
    },
    column: {
        dataLabels: {
            enabled: true
        }
    }
},