如何在 Highcharts 图表中旋转第一个和最后一个 x 轴标签？

【问题标题】：How to rotate first and last x-axis label in Highcharts chart?如何在 Highcharts 图表中旋转第一个和最后一个 x 轴标签？
【发布时间】：2017-10-13 15:05:00
【问题描述】：

我只想在 x 轴上旋转第一个和最后一个标签。我有以下格式化功能：

formatter() {
    if (this.isFirst || this.isLast) {
        // First or last label here
        var rotatedValue = this.value.doRotation();   // TODO here
        return rotatedValue;
    } else {
        return this.axis.defaultLabelFormatter.call(this);
    }
},

我做了一项研究，但没有发现（如何调用一些旋转功能）。我使用基本的折线图。

【问题讨论】：

您使用哪种图形/图表？线？酒吧？
我使用折线图。

标签： javascript charts highcharts rotation axis

【解决方案1】：

您可以将xAxis.labels.useHTML 选项设置为true 并通过CSS3 设置这些标签的样式：

  xAxis: {
    labels: {
      useHTML: true
    }
  },

  chart: {
    events: {
      load: function() {
        var div = this.xAxis[0].labelGroup.div;

        div.firstChild.style.transform = "rotate(30deg)";
        div.lastChild.style.transform = "rotate(30deg)";
      }
    }
  }

现场工作演示： http://jsfiddle.net/kkulig/fepj1f5g/

API 参考： http://api.highcharts.com/highcharts/xAxis.labels.useHTML

【讨论】：

很奇怪，它对我不起作用。两个标签都消失了。
请提供您的代码的缩小演示（最好是实时工作示例）。