在Highcharts极地图中系列之间的标签位置

Question

我试图在极坐标图表的外部放置自定义标签，但无法找到任何方法。请在下面找到我想要实现的目标。

不必使用实际的系列标签，但未发现可以相对于实际图表定位的任何其他内容（顶级标签可以放置在任何位置，但只能使用绝对左侧和顶部）。

还尝试将pointPlacement和tickmarkPlacement更改为＆＃34;在＆＃34;之间哪种工作，但它旋转实际的图表，所以我得到一个钻石形状而不是一个正方形，我之后的效果更像是旋转标签并留下刻度。

Answer 1

在这种情况下，自定义标签可以相对于网格线组定位。

绘制标签的方法：

function drawLabels () {
  let labels = this.customLabels,
      bbox = this.xAxis[0].gridGroup.getBBox(),
     positions = [
       [bbox.x + bbox.width / 2, bbox.y],
       [bbox.x + bbox.width, bbox.y + bbox.height / 2],
       [bbox.x + bbox.width / 2, bbox.y + bbox.height],
       [bbox.x, bbox.y + bbox.height / 2]
     ];

  if (!labels) {
    labels = this.customLabels = ['lab1', 'lab2', 'lab3', 'lab4'].map(text => this.renderer.label(text, 0, -9999).add().attr({zIndex: 4}));
  }

  labels.forEach((label, i) => {
    label.align({
      align: 'center',
      verticalAlign: 'middle',
      width: label.width,
      height: label.height
    }, null, {
      x: positions[i][0],
      y: positions[i][1],
      width: 0,
      height: 0
    });
  });
}

在加载/重绘时绘制标签：

Highcharts.chart('container', {
  chart: {
    polar: true,
    type: 'line',
    events: {
      load: drawLabels,
      redraw: drawLabels
    }
  },

示例：http://jsfiddle.net/d6y1bn31/