如何在Highcharts圖表中旋轉第一個和最后一個x軸標簽？

Question

我只想旋轉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);
    }
},

我進行了一項研究，但未找到任何結果（如何調用某些旋轉函數）。 我使用基本的折線圖。

Answer 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