highcharts特殊定制:x轴文字竖直显示(兼容各浏览器)
来源:互联网 发布:单片机 液晶屏与电机 编辑:程序博客网 时间:2024/06/07 03:56
做项目要用到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);
}
效果如图:
于是趁着今天记忆还在,把其记录下来,希望可以帮到别的遇到同样问题的朋友。
- highcharts特殊定制:x轴文字竖直显示(兼容各浏览器)
- 浏览器兼容问题项目总结(二)Highchart 在chrome下x轴文字竖直显示(兼容IE和Chrome)
- Highcharts X轴文字竖排
- Highcharts X轴文字竖排
- android竖直显示文字
- MS Chart X轴竖直显示
- AndroidTextView实现文字竖直显示
- Unity Text竖直显示文字
- Highcharts隐藏x轴文字的方法
- Highcharts图表插件X轴数据过多,ie8下面文字竖排显示
- FusionCharts使x轴值倾斜或竖直显示
- CSS实现背景透明,文字不透明(兼容各浏览器)
- CSS实现背景透明,文字不透明(各浏览器兼容)
- CSS实现背景透明,文字不透明(各浏览器兼容)
- CSS实现背景透明,文字不透明(各浏览器兼容)
- CSS实现背景透明,文字不透明(兼容各浏览器)
- 自定义竖直旋转显示文字的TextView
- Android开发:让TextView文字竖直显示
- Ubuntu下SSH设置
- storyboard的问题
- Linux中查看CPU信息
- last day on windows programming
- python核心编程第九章(9-10)
- highcharts特殊定制:x轴文字竖直显示(兼容各浏览器)
- 远程备份还原SQL数据库
- RabbitMQ学习之集群部署
- UVA - 757 Gone Fishing 贪心+枚举
- web服务层不需要外键
- 程序员也文艺:海燕——高尔基
- 第九章 内联函数
- zoj 3430 Detect the Virus(AC自动机)
- Java Comparator (比较器接口 Comparator)