防止 Highchart.js 剪切 xAxis 标签

Question

我只想显示 xAxis 的第一个和最后一个标签。然后，我想在没有旋转的情况下在一行中显示它。当我这样做时，当有很多列或视口的宽度很小时，就会发生这种情况，最后一个标签会被剪掉。

在线演示： https://jsfiddle.net/8esnf4dj/

这是我的 xAxis 配置：

xAxis: {
      categories: [....],
      labels: {
          rotation: 0,
          style: {
            textOverflow: 'none',
            whiteSpace: 'nowrap'
          },
     }
}

有什么方法可以让文本不发生这种情况吗？

我已经看到这可以通过添加 chart.marginRight 来解决，但我宁愿不要“丢失”该空间而不是右侧，而是以始终可见的方式对齐文本。

Answer 1

我不确定仅使用 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

Answer 2

您可以使用“对齐：右” 阅读 align 的用法以了解其工作原理。基本上这意味着条形将与标签的最右端对齐，因此标签始终适合

xAxis: {
      categories: [....],
      labels: {
          rotation: 0,
          align: "right",
          style: {
            textOverflow: 'none',
            whiteSpace: 'nowrap'
          },
     }
}