highcharts特殊定制：x轴文字竖直显示（兼容各浏览器）

做项目要用到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轴文字竖直显示（兼容各浏览器）相关推荐

css文字竖直显示_CSS属性设置 -- 盒子模型
Ⅰ 简介 HTML文档中的每个元素都被比喻成盒子,盒子模型通过四个边界来描述 margin -- 外边距,一个相框与另外一个相框之间的距离 border -- 边框,边框指的就是相框 padding ...
Echarts 问题解决 —— 设置图例、提示框上下角标；坐标轴文字过多显示不全、文字竖直一列显示、让坐标轴类目隔一个换一行；
目录 1.设置图例.提示框上下角标 1.1 修改弹框内容的方法 1.2 修改图例文字的方法 1.3 在 rich 中单独设置角标 1.4 实战 2.坐标轴文字过多显示不全 2.1 方法一:将坐标轴上 ...
QT 设置QLabel文字竖直居中
QT 设置QLabel文字竖直居中设置水平居中是Qt::AlignCenter或Qt::AlignHCenter,竖直(vertical)是Qt::AlignVCenter. myLabel -&g ...
python绘制直方图横坐标标签竖直显示的方法
python中用matplotlib画图时,横坐标标签是默认横着显示的,如下图: 看起来不太美观,要想使其竖直显示,使用下边一行代码即可: plt.xticks(rotation = 360) rot ...
excel如何使单元格里的文字竖着显示
为了一些特殊的效果,需要用到文字竖着显示,那么如何在Excel里面怎样让单元格里的文字竖着显示? 1,新建表格,输入示例文字,如图所示. 2,选中单元格点击上方工具栏"选项",然后 ...
浮动—春联（文字竖直排列）
<div id="main"><div class="top">李白</div><div class="le ...
html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
ScrollView文字竖直滚动
这几天研究了下文字的竖直滚动,是用ScrollView实现的,按下"启动"按钮,开始滚动,按下停止"按钮",停止滚动首先是Activity, import a ...
PS竖排英文和数字文字怎么改变方向（变竖直显示）
Photoshop 文字方向改为竖排时文字会颠倒显示单击文字工具选项栏右侧按钮打开字符调板,选择"标准垂直罗马对齐方式" 改变后的文字如图

highcharts特殊定制：x轴文字竖直显示（兼容各浏览器）

highcharts特殊定制：x轴文字竖直显示（兼容各浏览器）相关推荐

最新文章

热门文章