highcharts图表中级入门之xAxis label：X(横)坐标刻度值过长截断多行(换行)显示问题说明

在使用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下来测试一下就可以了的。