Highchart js条形图标签左对齐

我试图将此Highchart.js条形图中的所有标签对齐到左侧，以便它们不重叠。但是，Highchart.js似乎覆盖了我添加的CSS。Highchart js条形图标签左对齐

有谁知道如何将这些标签移动到酒吧的左边，仍然让他们对齐到左边？

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/

来源

2015-07-20 JeffB

可能重复：http://stackoverflow.com/questions/31523582/highcharts-how-to-push-the-categories-to-the-side/31538731#31538731 –

设置在标签align: 'left'对象实际上则相反你想要什么。试着拿出来，标签会弹回轴的左侧。

然后整理一下，添加一个文本对齐：到您的标签格式：

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

来源

2015-07-20 21:59:16

嘿艾拉，感谢您回应。当您移除align：left时，标签会移动到栏的左侧，但它们不再向左对齐。相反，他们似乎是正确的。 – JeffB

Highchart js条形图标签左对齐

回答

相关问题