设置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/

答

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

而且我发现另一种解决方案是使用格式化，以限制它的宽度：

 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/

答

您需要与重要声明添加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/

设置Highcharts x轴标签的宽度

相关推荐