Есть ли способ рассчитать положение пользовательской метки на индикаторе активности 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();
}

Я бынравится вычислять значения x, y в функции chart.renderer.label () вместо жесткого кодирования их в 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/