左對齊多類別X軸highchart

圖片1左對齊多類別X軸highchart

enter image description here

圖片2

enter image description here

我想左對齊的標籤但是當我做這，標籤一個st ack on other like 圖片2。

請幫我

來源

2013-03-18 h2n2102

您也可以將useHTML設置爲true，對標籤使用格式化程序，然後使用CSS樣式。

http://api.highcharts.com/highcharts#xAxis.labels.useHTML http://api.highcharts.com/highcharts#xAxis.labels.formatter

編輯：

http://jsfiddle.net/2QREQ/3/

xAxis: { 

      labels: { 
       //align: 'center' 
       useHTML:true, 
       formatter:function(){ 

        return '<div class="label">'+this.value+'</div>'; 
       } 
      } 
     },

CSS

.label { 
text-align:left; 
width:60px;

}

來源

2013-03-18 10:51:56

我曾經使用過useHTML和格式化程序，但它不起作用:( – h2n2102 2013-03-19 01:54:36

@ h2n2102請看更新後的答案 – 2013-03-19 09:22:24

感謝您的幫助，我現在可以做到，但是我的分類文本長度超過60px，我想設置它的寬度是自動的，但是當我設置自動，它確實再次對齊:( – h2n2102 2013-03-20 01:46:08

給綠色和藍色的酒吧一個容器格/跨度。然後申請標籤和容器span/div a'display：inline-block'css。

通過這樣做，您將強制酒吧'給標籤的空間'。

來源

2013-03-18 09:51:14

標籤堆疊在其他上，而不是標籤上的圖表堆棧。 – h2n2102 2013-03-19 01:55:47

這一個工作沒有固定的寬度：

.highcharts-axis-labels span { 
    left: 0 !important; 
}

因爲它使用的最大標籤的寬度，並通過提高「左」值移動小一次，就可以防止通過設置將其固定爲0。所以，不需要固定寬度或「對齊：離開」。

更新：

標籤「useHTML」設置必須設置爲true才能使用！

xAxis: { 
    labels: { 
    useHTML: true,

來源

2014-01-28 13:29:34 phlppn

左對齊多類別X軸highchart

回答

相關問題