阻止 Highchart.js 切割 xAxis 标签

Question

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

这是我的 xAxis 配置：

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

有没有什么方法可以使文本对齐而不会发生这种情况？

我已经看到可以通过添加 chart.marginRight 来解决这个问题，但我宁愿不要“丢失” space 不正确的内容，而只是以某种方式对齐文本始终可见。

Answer 1

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

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

Answer 2

我不确定是否可以仅使用 API 选项来实现它，因为所有标签都呈现在刻度的中心，但您可以 move/set每个标签 'manually'.

    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

阻止 Highchart.js 切割 xAxis 标签

Prevent Highchart.js from cutting xAxis label

highcharts

react-highcharts