Question

的高调演示制作了一个小小提琴

我可以归结为四件事：

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

labels: { 
    rotation: -45
}

2）最后一个标签的确非常长。这是基于为每个图表提供的数据，因此情况并非总是如此，但在30％-40％的情况下，这种情况经常发生。

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

4）我需要在图表和图例之间添加间距以适应标签尺寸，但仅限于标签太长并与图例发生碰撞时。

这似乎只发生在chart: { inverted: true }时，如果它没有反转，则图例表现正常，根据需要增加与图表的距离。

理想情况下，我想知道是否有一个我缺少的特定选项可以实现这一目标，即，我希望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/

倾斜的highcharts轴标签与图例

1 个答案: