问题描述
我只想显示 xAxis 的第一个和最后一个标签。然后,我想在没有旋转的情况下在一行中显示它。当我这样做时,当有很多列或视口的宽度很小时,就会发生这种情况,最后一个标签会被剪掉。
在线演示: https://jsfiddle.net/8esnf4dj/
这是我的 xAxis 配置:
xAxis: {
categories: [....],labels: {
rotation: 0,style: {
textOverflow: 'none',whiteSpace: 'Nowrap'
},}
}
有什么方法可以让文本不发生这种情况吗?
我已经看到这可以通过添加 chart.marginRight
来解决,但我宁愿不要“丢失”该空间而不是右侧,而是以始终可见的方式对齐文本。>
解决方法
我不确定仅使用 API 选项是否可以实现它,因为所有标签都呈现在刻度的中心,但您可以“手动”移动/设置每个标签的位置。>
events: {
render() {
const chart = this;
const xAxis = chart.xAxis[0];
const lastTickPosition = xAxis.tickPositions.length - 1;
const lastLabel = chart.xAxis[0].ticks[lastTickPosition].label;
lastLabel.translate(-lastLabel.getBBox().width/ 4,0)
}
}
演示:https://jsfiddle.net/BlackLabel/kbn7zwfc/
API:https://api.highcharts.com/highcharts/chart.events.render
,您可以使用“对齐:右” 阅读 align 的用法以了解其工作原理。基本上这意味着条形将与标签的最右端对齐,因此标签始终适合
xAxis: {
categories: [....],labels: {
rotation: 0,align: "right",style: {
textOverflow: 'none',whiteSpace: 'nowrap'
},}
}