highcharts 坐标轴标签样式调整

这段时间，因为项目的需要，前端数据可视化框架用的highcharts比较多，也遇到了一些困惑，现在总结一下遇到的相关问题。

highcharts坐标轴默认标签样式

highcharts默认的坐标标签样式为：



可以看到，字体是水平放置的，如果数据列比较多，放置不开时，标签会上下错开显示。

有两种方法解决：

1. 旋转标签

xAxis: {
categories: ['北京', '哈尔滨', '青岛', '天津', '上海', '杭州','南京', '广州', '深圳', '香港', '昆明', '成都'],
labels: {
rotation: -45//让标签旋转-45°
}
},

但是很明显，如果想要标签竖着放置，单独的每个字都是旋转过的。所以要使字体显示正常，就需要下面的方法了

标签竖着放

xAxis: {
categories: ['北京', '哈尔滨', '青岛', '天津', '上海', '杭州','南京', '广州', '深圳', '香港', '昆明', '成都'],
labels:{
y:30,//向下离坐标轴30px，可以自己调整
style: {
writingMode : 'tb-rl'//文字竖排样式,
}
}
},

更多highcharts内容请到highcharts官网 或者highcharts中文网查看