做项目要用到highcharts画柱状图,可是x轴数据过多,如果文字从左至右显示显得拥挤不堪,于是想竖起显示,于是想到用xAxis的rotation属性,把文字旋转90度,可是这样文字显示虽然是竖直但却是歪的,如图。于是网上各种关键字各种搜索,一种说法是:在xAxis的labels属性里加样式,即style:{ writingMode:'tb-rl', //文字竖排样式},或者:style:{layoutFlow: 'vertical-ideographic'},可是两种都只支持ie内核的浏览器,火狐,chrome不支持。于是再次搜索html文字竖直显示关键字,查到如下一段代码:
css样式:
#dy{
font-size: 14px;
width: 14px;
word-wrap: break-word;
display:block;
}
</style>
body:
<text id='dy'>测试需要垂直显示的文字 T E S T B Y
</text>
测试各种浏览器都可以正常竖直显示,于是应用到highchart,同样在xAxis的lables属性里加样式:即
style:{fontSize: '14px',
width: '14px',
wordWrap: 'breakWord',
display:'block'}
心想,这下肯定有效果了,可是前台一查看,还是没效果。
就这样,隔了一天之后,终于灵机一想:可不可以把x轴上的数据,每个数据的每两个字之间加个换行符<br/>,想到于是立即行动,没想到真的成功了!如下js代码,对x轴数据deptnames数组进行:分别取每个元素,在其每两个字之间加上换行符<br/>,如‘信息科'就转换成:'信<br/>息<br/>科<br/>:
var deptnames1 = new Array(); //deptnames1是用来放置处理后的数组
for(var i = 0; i < deptnames.length;i++){ //deptnames是处理前的数组
var deptname = deptnames[i];
var str = deptname.charAt(0);
for( var j = 1; j < deptname.length; j++){
str = str + '<br/>' + deptname.charAt(j);
}
deptnames1.push(str);
}
效果如图:
于是趁着今天记忆还在,把其记录下来,希望可以帮到别的遇到同样问题的朋友。