Highcharts p ie аннотации диаграммы не центрированы

Question

У меня есть 2 р ie диаграммы, отображаемые рядом друг с другом, соответствующие 2 серии. Я хочу добавить заголовок под каждую серию, но не хочу использовать свойство title, потому что каждый компонент Highcharts получает только один заголовок. Я решил использовать аннотации, и это работает, поэтому мне нужно вручную указать координаты x и y для меток аннотаций. Я использую формулу для расчета этих точных позиций. Однако, когда я отображаю аннотации, кажется, что они не точно совпадают в середине каждого графика.

Параметры моего графика выглядят так:

const width = 700
const height = 200

Highcharts.chart('container', {
chart: {
    type: 'pie',
    width,
    height
},

plotOptions: {
    pie: {
        dataLabels: {
            enabled: false
        }
    }
},
annotations: [{
    labels: [{
        point: {
            x: 0.33 * width,
            y: height
        },
        text: "centered"
    }]
}, {
    labels: [{
        point: {
            x: 0.635 * width,
            y: height
        },
        text: "also centered"
    }]
}],
series: [
    {
        center: ['33%', '50%'],
        type: 'pie',
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    },
    {
        center: ['66%', '50%'],
        type: 'pie',
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});

Вот как это выглядит как сейчас: https://jsfiddle.net/0cfztdms/

И вот что я хочу достичь без жесткого кодирования позиций x: P ie диаграммы с центрированными аннотациями

Answer 1

Я нашел способ центрировать свои этикетки без необходимости выполнять ручные вычисления, используя Модуль аннотаций Highcharts . Установите anchorX = 'center' и anchorY = 'middle' (эти реквизиты из модуля аннотаций) автоматически отцентрируют аннотации для вас. Подробнее здесь

const width = 600;

annotations: [{
  labels: [{
    point: {
      x: (1 / numberOfCharts + 1) * width,
      y: 200,
      anchorX: 'center',
      anchorY: 'middle'
    },
    text: 'Label 1'
  }, {
    point: {
      x: (1 / numberOfCharts + 1) * 2 * width,
      y: 200,
      anchorX: 'center',
      anchorY: 'middle'
    },
    text: 'Label 2'
  }
}]

Answer 2

Я думаю, что лучшим решением будет отрисовка пользовательской метки с помощью инструмента SVGRendere, чем использование функции аннотации.

Демо: https://jsfiddle.net/BlackLabel/L08bvngk/

render() {
  let chart = this;

  chart.series.forEach((s, i) => {
    if (chart['label' + i]) {
      chart['label' + i].destroy();
    }
    chart['label' + i] = chart.renderer.label('testtestestest', 0, 0)
      .css({
        color: '#FFFFFF'
      })
      .attr({
        fill: 'rgba(0, 0, 0, 0.75)',
        padding: 8,
        r: 5,
        zIndex: 6
      })
      .add();
    //center the label
    chart['label' + i].translate(s.center[0] + chart.plotLeft - chart['label' + i].getBBox().width / 2, chart.plotHeight)
  })
}

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

API: https://api.highcharts.com/highcharts/chart.events.render