highcharts中坐标轴标签文字超出解决方案

问题描述

在实际应用中，总会有些特(biàn)殊(tài)需求，比如说有些图表坐标轴的文字特别长。
例如：
正经的图表：

需求后的图表：

产品：大哥！我的图表都快看不见了好吧，把这个bug发布上去，让前端改！！！

亦或这种，直接挤出去了

产品：WHAT ? 我的字都没了，改！！！

N     S       S       M      D       X
(i)   (hi)   (hen)   (e)   (ong)   (i)

好了好了，其实是“你说什么都行”啦

步入正题

虽然网上很少找到相关问题，但是其实文档里面有的啦。
如图：

x轴y轴的都有，他可以自定义labels，还可以加html标签和样式的

我在下面写了个小实例，可以参考。

部分代码：

xAxis: {
	categories: ['没错这就是那个超级红超级大并且超级有人气的砸牛顿的苹果(后来被白雪公主咬了一口的)苹果',
				 '这是某人父亲去买的橘子',
				 '这是孔融让的那个',
				 '这是不吐葡萄皮的葡萄',
				 '我是一个没什么想说的香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉啊~'],
	labels:{
		formatter: function() { 
			return '<span class="x-labels" title="' + this.value + '">' + this.value + '</span>'
		},
		useHTML: true
	}
},

css：

.x-labels{
	color:blue;
	max-width: 50px;
	display: inline-block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~