設置Highcharts x軸標籤的寬度

我需要爲xAxis Label設置最大寬度，以便當它太長並且其餘字母（字符）將會到達下一行。設置Highcharts x軸標籤的寬度

我看了Highcharts x axis label text wrapping lost on setting label step，發現設置「width」對英文單詞（用空格分隔）正常工作。

但是，如果沒有空白空間，說「VeryLongLongLongWord」或「這是一個很長很長很長的中文」，那是行不通的。

我也試過設置wordWrap: break-word，還是沒有用。

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
     }, 
     xAxis: { 
      categories: ['This is a long Text', 'VeryLongLongLongWord', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','這是一個很長很長很長的中文'], 
     labels: { 
       style:{ 
        width:'30px',// not work for text without empty space 
        wordWrap: 'break-word'//no use 
       }, 
       step: 1 
      } 
     }, 

     plotOptions: { 
      series: { 
       pointWidth: 30 
      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 
});

Fidder酒店：http://jsfiddle.net/uehbmzgx/

來源

2015-12-02 Jaskey

@塞巴斯蒂安的解決方案，工作正常。

而且我發現另一種解決方案是使用格式化，以限制它的寬度：

 labels: { 
      useHTML:true,//Set to true 
      style:{ 
       width:'50px', 
       whiteSpace:'normal'//set to normal 
      }, 
      step: 1, 
      formatter: function() {//use formatter to break word. 
       return '<div align="center" style="word-wrap: break-word;word-break: break-all;width:50px">' + this.value + '</div>'; 
      } 
     },

http://jsfiddle.net/uehbmzgx/5/

來源

2015-12-03 02:53:14 Jaskey

您需要與重要聲明添加CSS樣式！

CSS

.highcharts-axis-labels span{ 
    word-break:break-all!important; 
    width:50px!important; 
    white-space:normal!important; 
}

Highcharts

xAxis: { 
     categories: ['This is a long Text', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','這是一個很長很長很長的中文'], 
     labels: { 
      useHTML:true, 
      style:{ 
       width:'50px', 
      }, 
      step: 1 
     } 
},

例子：http://jsfiddle.net/uehbmzgx/3/

來源

2015-12-02 13:12:20

設置Highcharts x軸標籤的寬度

回答

相關問題