javascript - Highchart js条形图标签左对齐

Question

我正在尝试将此 Highchart.js 条形图中的所有标签向左对齐，以免它们与条形重叠。但是，Highchart.js 似乎覆盖了我添加的 css。

有谁知道如何将这些标签移动到条形图的左侧并仍然使它们与左侧对齐？

 xAxis: [{
        categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
        labels: {
            align: 'left', 
            overflow: 'justify',
            style: {
                    fontFamily: 'Arial',
                    fontSize: '20px',
                    color: '#333',
                    width: '350', 
                    left: '-20px', 
                    x: 0
               },
            formatter: function () {
                return '<div> <span>' + this.value + '</span><span style="font-weight: bold">' + " " + '</span> </div>';
            },
            useHTML: true
      }

http://jsfiddle.net/butlerjeff1/prcoo7vy/1/

Answer 1

在标签对象中设置 align: 'left' 实际上与您想要的相反。尝试将其取出，标签将弹出回到轴的左侧。

然后，为了整理它，将 text-align:right 添加到您的标签格式化程序中:

formatter: function () {
    return '<div style="text-align:right"> <span>' + this.value + '</span><span style="font-weight: bold">' + " " + '</span> </div>';
},

See updated fiddle

编辑对不起，我看错了你的帖子。您可以保留 align:left 但随后将 x:-300 添加到标签对象，这会将它们推回到轴的左侧(我选择了 300匹配您设置的左边距，但当然您可以将其编辑为您想要的任何内容)

New Fiddle Here