Highcharts饼图批注未居中

我有两个饼图，分别对应于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]
        ]
    }]
});

下面是它现在的样子：

以下是我不需要硬编码x位置就可以实现的目标：

---

我认为一个更好的解决方案是通过使用SvgRender工具呈现自定义标签，而不是使用注释功能

演示：

API:

---

API:

我找到了一种方法，可以将标签居中，而不必使用手动计算。Set

anchorX='center'

和

anchorY='middle'

（这些道具来自注释模块）将自动为您将注释居中

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)
  })
}

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'
  }
}]