有没有一种方法可以计算Highcharts活动量规上的自定义标签位置？

Question

我有一个包含两个系列的Highcharts活动量规。我试图在每个环的起点放置标签。我可以使用硬编码的x，y坐标，但是我想知道是否有一种方法可以计算出位置。当前看起来像这样：

这是我用来在图表渲染事件中添加标签的代码：

function render() {

var chart = this;

chart.renderer.label('Completed 65%', 24, 25, 'rect', 0, 0, true, true, '')
  .add();
chart.renderer.label('Follow-up 45%', 28, 42, 'rect', 0, 0, true, true, '')
  .add();
}

我想在chart.renderer.label（）函数中计算x，y值，而不是将其硬编码为24,25和28,42。但是，我无法在对象模型中找到任何东西来定位以x和y开头的系列的物理位置，或标签的大小。我要完成许多此类活动量表，并仔细检查所有这些活动量表，然后尝试找到魔术坐标似乎是错误的方法。

Answer 1

您可以按照与官方活动计量器演示中的图标相同的方法进行操作：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/

您将找到使用序列点shapeArgs计算的位置。我修改了该功能以按预期呈现标签。在下面发布的演示中进行检查。

功能代码：

function renderLabels() {

  var offsetTop = 5,
    offsetLeft = 5;

  if (!this.series[0].label) {
    this.series[0].label = this.renderer
      .label('Completed 65%', 0, 0, 'rect', 0, 0, true, true)
      .add(this.series[1].group);
  }

  this.series[0].label.translate(
    this.chartWidth / 2 - this.series[0].label.width + offsetLeft,
    this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
    (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2 + offsetTop
  );


  if (!this.series[1].label) {
    this.series[1].label = this.renderer
      .label('Follow-up 45%', 0, 0, 'rect', 0, 0, true, true)
      .add(this.series[1].group);
  }

  this.series[1].label.translate(
    this.chartWidth / 2 - this.series[1].label.width + offsetLeft,
    this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
    (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2 + offsetTop
  );
}

函数调用：

chart: {
  type: 'solidgauge',
  events: {
    render: renderLabels
  }
}

演示：
https://jsfiddle.net/BlackLabel/vpj32tmy/