绘图区域内的 Highcharts yAxis 标签和左填充

Question

我有一个柱形图，绘图区域内有 yAxis 标签。 演示：http://jsfiddle.net/o4abatfo/

我是这样设置标签的：

yAxis: {
  labels: {
    align: 'left',
    x: 5,
    y: -3
  }
}

问题是最左边的列太靠近绘图区域边缘，以至于标签与它重叠。有没有办法调整绘图区域的填充，使列从右边开始一点？

Answer 1

您可以将 min 值设置为 -0.49。

http://jsfiddle.net/o4abatfo/2/

Answer 2

一个可能的解决方案：

将标签保留在外面，并将plotBackgroundColor应用为图表backgroundColor。

这意味着图例也将包含在背景颜色中，但同样，它是可选的。

示例：

http://jsfiddle.net/jlbriggs/o4abatfo/11/

Answer 3

我问了同样的问题 in the Highcharts forum 并得到了这个解决方案作为@paweł-fus 的回复：

var chartExtraMargin = 30;

Highcharts.wrap(Highcharts.Axis.prototype, 'setAxisSize', function (p) {
  p.call(this);
  if (this.isXAxis) {
    this.left += chartExtraMargin;
    this.width -= chartExtraMargin;

    this.len = Math.max(this.horiz ? this.width : this.height, 0);
    this.pos = this.horiz ? this.left : this.top;  
  }
});

但是，添加它会使工具提示出现在错误的位置。这是通过覆盖 Tooltip.prototype.getAnchor() 方法并在 x 坐标中添加额外边距来解决的：

Highcharts.wrap(Highcharts.Tooltip.prototype, 'getAnchor', function(p, points, mouseEvent) {
  var anchor = p.call(this, points, mouseEvent);
  anchor[0] += chartExtraMargin;
  return anchor;
});

绘图区域内的 Highcharts yAxis 标签和左填充

Highcharts yAxis labels inside plot area and left padding

highcharts