HighCharts：对齐旋转的多行标签

Question

我正在尝试对齐 HighCharts 中的轴标签
标签不应被修剪，因此不允许省略号

现在的样子：

我想要的样子：

代码：https://jsfiddle.net/9xw6dL3f/25/

{
  "chart": {
    "width": 500,
    "height": 300,
    "type": "column"
  },
  "title": {
    "text": null
  },
  "xAxis": {
    "type": "category",
    "labels": {
      "rotation": -90,
      "style": {
        "textOverflow": "none"
      }
    }
  },
  "series": [
    {
      "name": "",
      "data": [


        { "name": "Follow me into my theatre of lunacy", "y": -10, "color": "#ABC" },
        { "name": "1", "y": 1, "color": "#000" },
        { "name": "2", "y": 2, "color": "#000" },
        { "name": "3", "y": 3, "color": "#000" },
        { "name": "4", "y": 4, "color": "#000" },
        { "name": "5", "y": 5, "color": "#000" },


      ]
    }
  ]
}

Answer 1

可以根据行数移动标签
为图表对象添加渲染功能

{
  "chart": {
    ...
    events: {
      render() {
        for (let i = 0; i < this.xAxis[0].names.length; i++) {
          const label = this.xAxis[0].ticks[i].label;
          const rows = (label.element.innerHTML.match(/<\/tspan>/g) || []).length;
          label.translate(-8 * rows, 0);
        }
      }
    }

其中

8

是行大小的一半（以 px 为单位）

https://jsfiddle.net/kLz1uoga/5/

Answer 2

谢谢里戈里奇。解决方案有效