設置Highcharts x軸標簽的寬度

Question

我需要為xAxis Label設置最大寬度，以便當它太長時，其余字母（字符）將轉到下一行。

我閱讀了在設置標簽步驟中丟失的Highcharts x軸標簽文本換行 ，發現設置“寬度”對於英文單詞（以空格分隔）正常工作。

但是，如果沒有空白，請說“ 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]
        }]
    });
});

飼料： http : //jsfiddle.net/uehbmzgx/

Answer 1

@Sebastian的解決方案工作正常。

我發現了另一個使用格式化程序限制其寬度的解決方案：

        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/

Answer 2

您需要使用！important聲明添加css樣式。

的CSS

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

高圖

 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/

Answer 3

最好的方法是動態格式化字符串：

   xAxis : {
          type: 'category', 
          labels: {
            rotation: -90,
            style: {
              color: "#ff0000",
            },
            formatter: function () {//use formatter to check if length of string is greater than 20 and maintain its width.
              if(this.value.length > 20){
                return this.value.substring(0, 17) + '...';
              }
              return this.value;
            }
          },