设置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;
            }
          },