在使用highcharts圖表的過程中，總會碰到這樣一個很是棘手的問題，橫坐標刻度值太長，在不換行顯示的情況下顯得格外擁擠。雖然針對這一問題是可以對其刻度值進行旋轉以此來避開顯示擁擠問題【如何讓highcharts圖表組件的X軸坐標刻度旋轉屬性值rotation的透明分析】，可是還是想對過長的刻度值進行一定長度的截取多行顯示。
針對上面這樣一個問題，對於highcharts圖表而言顯得不是那么的困難，我們需要將這個問題首先進行定位到xAxis的labels屬性節點上去，通過查找API，我們不難發現label內有一個formatter方法可以對其刻度值進行格式化然后return返回,一般性的寫法如：
01.
xAxis: {
02.
categories: ['Foo', 'Bar', 'Foobar'],
03.
labels: {
04.
//對橫坐標刻度值進行格式化
05.
formatter: function() {
06.
return '<a href="'+ categoryLinks[this.value] +'">'+
07.
this.value +'</a>';
08.
}
09.
}
10.
},
我們知道了formatter這樣一個格式化方法，也很容易地通過this.value獲取到刻度值，那么我們就不難將其進行一定規則性的截取然后以HTML格式返回。這里提供一個符合需求的完整Demo示例代碼：
01.
$(function () {
02.
var categoryLinks = {
03.
'Foo': 'http://www.google.com/search?q=foo',
04.
'Bar': 'http://www.google.com/search?q=foo+bar',
05.
'Foobar': 'http://www.google.com/serach?q=foobar'
06.
};
07.
08.
$('#container').highcharts({
09.
chart: {
10.
},
11.
12.
xAxis: {
13.
categories: ['測試橫坐標過程問題', 'Bar', 'Foobar'],
14.
15.
labels: {
16.
formatter: function() {
17.
//獲取到刻度值
18.
var labelVal = this.value;
19.
//實際返回的刻度值
20.
var reallyVal = labelVal;
21.
//判斷刻度值的長度
22.
if(labelVal.length > 3)
23.
{
24.
//截取刻度值
25.
reallyVal = labelVal.substr(0,3)+"<br/>"+labelVal.substring(3,labelVal.length-1);
26.
}
27.
return reallyVal;
28.
}
29.
}
30.
},
31.
32.
series: [{
33.
data: [29.9, 71.5, 106.4]
34.
}]
35.
});
36.
});
這樣第一個刻度就會分兩行顯示了的，這里就不貼上效果查看地址了的，朋友們可以自己copy下來測試一下就可以了的。