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條形圖標籤左對齊

回答

相關問題