想要使Highcharts条形图数据标签出现在图表的最右侧

Question

我正在寻找所需的输出：

series.dataLabels.align：left / right`不是要切割它。它只会出现在每个栏的蓝色矩形之后而不是最右边，这不是我想要的。我也看了一下highcharts api，我无法找到完成工作的图表选项。提前谢谢。

 My current chart options:
 var options = {
            chart: {
                renderTo: 'container',
                type: 'bar',
            },
            credits: {
                enabled: false
            },
            colors: ['#024a7a'],
            title:{
                text:null
            },
            plotOptions: {
                bar:    {
                animation: false
                },
                series: {
                    showInLegend: false,
                    states: {
                        hover:  {
                            enabled:false
                        }
                    }
                }
            },
            tooltip: { 
            enabled: false 
            },
            xAxis: [{
                categories: ['SAC 1', 'SAC 2', 'SAC 3'],
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            }],
            yAxis: [{
                gridLineWidth: 0,
                labels: {
                    enabled: false
                },
                minorGridLineWidth: 0,
                title: {
                    text: null
                }
            }],
            series: [{
                data: [10, 5, 15],
                dataLabels: {
                    align: 'left',
                    enabled: true
                }
            }]
        };
        var chart = new Highcharts.Chart(options);
        });

Answer 1

实现该效果的方法之一是传递特定的xAxis和yAxis配置对象，其中包含很少的参数：

xAxis: [{
        opposite: true,
    type: 'category',
        labels: {
            formatter: function() {
            return this.chart.series[0].processedYData[this.pos] + ' %'
        },
    },
    lineWidth: 0,
    minorTickWidth: 1,
    tickWidth: 0
},

yAxis: {
        title: {
            enabled: false
    },
    labels: {
            enabled: false
    },
    gridLineWidth: 0,
    max: 100
},

上面的配置按系列数据值填充标签，因此您应该准备类似下面的系列数组：

series: [{
    data: [31, 15, 9, 5]
}],

让我们来寻找这个JSFiddle： http://jsfiddle.net/daniel_s/yp9h6b7m/

祝你好运！