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

Answer 2

在xAxis标签中使用'reserveSpace：true'并删除格式化程序，样式（宽度，x，左），使用HTML。

这将帮助您获得所需的输出

http://jsfiddle.net/prcoo7vy/24/

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',
            reserveSpace: true,
            style: {
                    fontFamily: 'Arial',
                    fontSize: '20px',
                    color: '#333'
               },

      }]

Answer 3

在xAxis标签中使用'reserveSpace：true'并删除格式化程序，样式（宽度，x，左），使用HTML。

这将帮助您获得所需的输出

enter code here http://jsfiddle.net/prcoo7vy/24/

Highchart js条形图标签左对齐

3 个答案: