javascript - Highcharts 条形图将数据标签格式化为百分比并添加文本

Question

我有 highcharts 栏。

我如何将我的数据标签格式化为百分比并添加文本数据标签(我如何重新定位此文本？需要我创建此栏的垂直版本)？

不管是横向还是纵向的解决方案，最终应该是这样的。

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Activity'
    },
    xAxis: {
        categories: ['Activity']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
        	borderWidth: 0,
            stacking: 'normal',
            pointWidth: 3,
            dataLabels: {                
                enabled: true,
                y: 2,
                verticalAlign: 'top',
                align: 'left',
                color: '#000000',
             style: {
                    textOutline: false 
                }
            }
        }
    },
    series: [{
        name: 'One',
        data: [10],
        color: '#f45b69'
    }, {
        name: 'Two',
        data: [20],
        color: '#44bba4'
        
    }, {
        name: 'Three',
        data: [30],
        color: '#ff9f1c'
    }]
});

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Answer 1

要仅显示后面带有百分号的数字以及系列名称，您可以像这样设置 dataLabels 格式:

plotOptions: {
  series: {
    format: '{y} % <br/> {series.name}',
    ...
  }
}

如果你想改变它的外观或有更多的定制能力，你可以使用 formatter而不是 format。

工作示例: https://jsfiddle.net/ewolden/y5ygdx2a/1/

dataLabels.format 上的 API: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format