javascript - 倾斜的 Highcharts 轴标签与图例重叠

Question

我根据 http://jsfiddle.net/w53woene/1/ 上的 highcharts 演示做了一个小 fiddle 。

我的问题归结为四件事:

1)我需要旋转标签(这是基于功能请求，所以我不能忽略它)。

labels: { 
    rotation: -45
}

2)事实上最后一个标签真的很长。这是基于为每个图表提供的数据，因此情况并不总是如此，但大约 30%-40% 的时间是这样，所以很常见。

3) 标签不应用省略号包裹或缩短。

4)我需要在图表和图例之间添加间距以适应标签大小，但仅当标签太长并与图例冲突时才需要。

这似乎仅在 chart: { inverted: true } 时发生，并且如果未反转，图例将正常运行，根据需要增加与图表的距离。

理想情况下，我想知道我是否缺少一个可以在 native 实现此目的的特定选项，即，我希望 floating: false 能够以与在图表没有倒置，但似乎没有倒置。如果这是不可能的，我想知道如何调整图表大小(不包括图例)以便通过 JavaScript 实现此目的。

Answer 1

问题是垂直轴在左侧尺寸上添加空间，但在底部没有添加空间。我会包装标签以获得更好的可读性:http://jsfiddle.net/w53woene/2/ - 否则可能会出现标签过长的情况，导致图表的绘图区域像素为 0。

如果您确实需要非换行文本，那么我会换行Axis.prototype。 getOffset 添加额外空间:

(function(H) {
  H.wrap(H.Axis.prototype, 'getOffset', function(p) {
    p.call(this);
    if (this.isXAxis) {

      var lastTick = this.tickPositions[this.tickPositions.length - 1],
        lastLabel = this.ticks[lastTick].label,
        height = lastLabel.getBBox(true).height;

      this.labelDiff = height - this.chart.marginBottom;
      if (this.labelDiff > this.chart.axisOffset[2]) {
        this.chart.axisOffset[2] = this.labelDiff;
      } else {
        this.labelDiff = 0;
      }
    } else {
      this.offset -= this.chart.xAxis[0].labelDiff;
    }
  });
})(Highcharts)

现场演示:http://jsfiddle.net/vwegeuvy/